Format string field display to show both value and title in Sanity Studio
Yes! While you can't directly customize how the built-in select field displays its options, you can create a custom input component to show both the value and title concatenated together. This is a common need when you want editors to see more context in the dropdown.
Here's how you can build a custom input component for your euronorm field:
import { set, unset } from 'sanity'
import { Stack, Select } from '@sanity/ui'
function EuronormInput(props) {
const { value, onChange, schemaType } = props
const options = schemaType.options?.list || []
const handleChange = (event) => {
const selectedValue = event.currentTarget.value
onChange(selectedValue ? set(selectedValue) : unset())
}
return (
<Stack space={2}>
<Select
value={value || ''}
onChange={handleChange}
>
<option value="">Select Euronorm...</option>
{options.map((option) => (
<option key={option.value} value={option.value}>
{option.value} - {option.title}
</option>
))}
</Select>
</Stack>
)
}
export default {
name: "euronorm",
type: "object",
fields: [
{
title: "Euronorm",
name: "euro",
type: "string",
components: {
input: EuronormInput
},
options: {
list: [
{value: "U", title: "Ikke Euro (før euro)"},
{value: "1L", title: "Euro 1 - 70/220/EØF"},
// ... rest of your options
]
}
}
]
}The key parts:
- Custom component receives props including
value,onChange, andschemaType(which contains your options list) - Access your options via
schemaType.options.list - Display concatenated values in the
<option>elements:{option.value} - {option.title} - Wire it up using
components: { input: EuronormInput }in your field definition
This approach works great whether your options are static (like your example) or dynamically loaded from an API using an async function in options.list. The custom input component has full access to the options list you define in the schema, and you can format the display however you need.
For more complex scenarios, check out the custom input components documentation and this guide on creating your first input component for Studio v3.
Show original thread4 replies
Sanity – Build the way you think, not the way your CMS thinks
Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.