---
title: "Make your own input components in Sanity!"
url: "https://www.bekk.christmas/post/2023/11/make-your-own-input-components-in-sanity"
authors: ["Jakob Nordnes Helgøy"]
published: "2023-12-11"
updated: "2025-12-20T14:25:08Z"
language: "en-US"
type: "article"
tags: ["Sanity"]
---
# Make your own input components in Sanity!
One of the best things about Sanity is the balance between flexibility and default features. They deliver a great product out of the box, but to unleash the full potential of Sanity, you should spend some time customizing it to make it even better. In this article, I will show you how to create a simple custom input component that provides a visual representation of icons, enhancing your studio experience.
## In short
Sanity lets you replace standard fields with custom input components, and Sanity UI makes it possible to render richer pickers such as an autocomplete list with visual icon previews. The result is a more usable Studio experience, where editors can see and select the right icon directly instead of guessing from text labels.
- **For:** Frontend developers working with Sanity Studio
- **Good to know beforehand:** Basic familiarity with Sanity and React
_AI-generated_
## Data input in Sanity
Sanity provides different solutions for the user to input and change data. These out-of-the-box solutions gives the user good alternatives, but in some cases you may want something extra from your input component. Maybe you want to [query and show data from a third party API?](https://www.sanity.io/guides/custom-input-3rd-party-data) Or maybe your editors just want to see what they're choosing when they're looking for a visual component to show?
## The basic input component
Let's say you have a component in your frontend that uses an Icon, and you want the editor to be able to pick this icon in Sanity studio. The icon can be added with a list of options in Sanity, doing something like this:
```tsx
import * as icons from "react-icons/si";
defineField({
name: "icon",
title: "Icon",
type: "string",
options: {
list: Object.keys(icons).map((icon) => ({
title: icon,
value: icon,
})),
},
}),
```
Which gives you a list looking like this:
Well, this does the job, but it's also a bit of a hassle for the user to know what the icon they're choosing actually looks like. To be sure they would have to visit the page showing the icons before choosing the icon. Let's fix this by making a custom input component!
## Making a custom input component with Sanity UI
[Sanity UI](https://www.sanity.io/ui) is a React library made by Sanity that you can use when making input components. It offers primitives and some components. Using the Autocomplete component it's possible to render a React element, and we can use this to show our icons in the list. The Autocomplete component also provides a much better search functionality.
Let's start by defining the AutoComplete component:
```tsx
export default function CustomIconInputComponent(props: StringInputProps) {
return (
({
title: icon,
value: icon,
}))}
placeholder="Search for an icon"
renderOption={(option) => (
{React.createElement(
icons[option.title as keyof typeof icons],
)}
)}
renderValue={(value, option) => option?.title || value}
value={props.value}
/>
);
}
```
Add the input component to the field as a component:
```tsx
defineField({
name: "icon",
title: "Icon",
type: "string",
components: { input: CustomIconInputComponent },
}),
```
And we end up with a visual representation of the icons!
To actually change the value we need to add logic to set and unset the value when changed:
```tsx
import { StringInputProps, set, unset } from "sanity";
export default function CustomIconInputComponent(props: StringInputProps) {
const { onChange } = props;
const handleChange = useCallback(
(event: { currentTarget: { value: any } }) => {
const nextValue = event.currentTarget.value;
onChange(nextValue ? set(nextValue) : unset());
},
[onChange],
);
return (
handleChange({ currentTarget: { value } })}
options={Object.keys(icons).map((icon) => ({
title: icon,
value: icon,
}))}
placeholder="Search for an icon"
renderOption={(option) => (
{React.createElement(
icons[option.title as keyof typeof icons],
)}
)}
renderValue={(value, option) => option?.title || value}
value={props.value}
/>
);
}
```
And there we go! We now have a fully functional input component for our icons in Sanity studio.