Display string list option title in preview subtitle
The issue you're running into is that country is a plain string field, not a reference, so country.title doesn't work. When you use a string field with a list of options, only the value (like 'usa' or 'fr') is stored in your document—not the title.
To display the title (like "United States" or "France") in your preview, you need to use the prepare function to map the value back to its title. Here's how to fix your schema:
{
name: 'landmark',
type: 'document',
title: 'Landmark',
fields: [
{
name: 'title',
type: 'string',
title: 'Name of the landmark'
},
{
name: 'country',
type: 'string',
title: 'Country',
options: {
list: [
{ title: 'United States', value: 'usa' },
{ title: 'France', value: 'fr' }
]
}
}
],
preview: {
select: {
title: 'title',
countryValue: 'country' // Select the country value
},
prepare({title, countryValue}) {
// Map the value back to its title
const countryMap = {
'usa': 'United States',
'fr': 'France'
};
return {
title: title,
subtitle: countryMap[countryValue] || countryValue
}
}
}
}This approach uses the prepare function to transform the stored value into the display title. The select object extracts the raw country value, then prepare looks it up in a mapping object to get the human-readable title.
The key insight from the Preview Configuration documentation is that when you have a string field with options, only the value is stored—the title is just for the UI dropdown. To display the title in previews, you need to manually map it back using prepare.
If you find yourself doing this mapping frequently, you might consider extracting the country list to a constant that you can reuse:
const COUNTRIES = [
{ title: 'United States', value: 'usa' },
{ title: 'France', value: 'fr' }
];
const countryMap = Object.fromEntries(
COUNTRIES.map(c => [c.value, c.title])
);
// Then use COUNTRIES in your field options and countryMap in prepareThis keeps your code DRY and makes it easier to add more countries later!
Show original thread14 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.