Get help on Discord

Formatting the display value of a string field in Studio

4 replies
Last updated: Mar 13, 2021
Hi, quick Studio question:Is it possible to format the display value of a string field?

I have a string field (select) which gets its values populated from an external API call.
However, I would like to show the concatenated value+title to the Studio editor in case they need to manually adjust. Is it possible to define a “display” value that concatenates {value} and {title}?


export default {
    name:"euronorm",
    type:"object",
    fields:[
       {title:"Euronorm", name:"euro", type:"string",
        options: {
            list: [
                {value:"U", title:"Ikke Euro (før euro)"},
                {value:"1L", title:"Euro 1 - 70/220/EØF"},
                {value:"2L", title:"Euro 2 - 70/220/EØF"},
                {value:"3L", title:"Euro 3 - 70/220/EØF"},
                {value:"4L", title:"Euro 4 - 70/220/EØF"},
                {value:"5L", title:"Euro 5 - 692/2008 (med bokstavene A til M)"},
                {value:"6L", title:"Euro 6 - 692/2008 (med bokstavene N til Y)"},
                {value:"1T", title:"Euro 1 - 88/77/EØF"},
                {value:"2T", title:"Euro 2 - 88/77/EØF"},
                {value:"3T", title:"Euro 3 - 88/77/EØF eller 2005/55/EF"},
                {value:"4T", title:"Euro 4 - 88/77/EØF eller 2005/55/EF"},
                {value:"5T", title:"Euro 5 - 88/77/EØF eller 2005/55/EF"},
                {value:"6T", title:"Euro 6 – 595/2009"},
                {value:"ET", title:"EEV – 88/77/EØF eller 2005/55/EF"}
            ] }
    },     
    ]}

AI Update

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:

  1. Custom component receives props including value, onChange, and schemaType (which contains your options list)
  2. Access your options via schemaType.options.list
  3. Display concatenated values in the <option> elements: {option.value} - {option.title}
  4. 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.

It may be possible in the schema, but in my experience any time I’ve needed to use a value from the document, I had to make a custom component and use the document hook.
Yes, that is perhaps the best solution anyway, as I am hoping to keep the schema as clean as possible for the future.I have seen the
doc on custom input components, so I’ll have to study up on that to see if I can build a custom string input field that displays both. Thanks for the help :)
title
is the display value, though, and that can be whatever you want. I presume you’re already setting the title and value programmatically somewhere based on the API response, so you could concat the two when you’re setting that:`{ value: value, title: 
${value} ${title}
}`If you need the value of 
title
saved on its own as well, you can save that as a third parameter:`{ value: value, title: 
${value} ${title}
, originalTitle: title }`
ah, nice. good point. That makes for an easy solution. Yes, I can control this from the API side of things, so that would solve it nicely.

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.

Get started for freeExplore the demo

Was this answer helpful?