Add Custom Text Input to the Options List in Studio

6 replies
Last updated: Aug 7, 2020
Does anyone know how I might add a custom text input to the
options
list in Studio? For example, if a user wants to select from preset labels or enter their own.
{

name: 'label',

title: 'Label',

type: 'string',

options: {

list: ['First Name', 'Last Name', 'Company', 'Email', 'Message', 'Phone']

},
Thanks!
Aug 7, 2020, 2:36 PM
Usually it’s either a select with options or a string field for custom input. However, what you could try is set up a conditional input field that only shows up if the user selects an option like
'Other'
.
For an example of how to set up conditional fields as a custom input component, here’s a snippet:
https://github.com/sanity-io/sanity-recipes/blob/39d2fb0d079fec3a60dc1f13d6abbf6f4e3ae037/snippets/conditionalFieldsCustomInputComponent.js
Let me know if you need more info based on the snippet
🙂
Aug 7, 2020, 4:46 PM
Cool, thanks for the quick reply Peter
Aug 7, 2020, 4:49 PM
Though to clarify, this is on the Studio side of things - I want to give our marketing team the ability to create a custom input field in addition to the pre set drop down that currently exisist
Aug 7, 2020, 4:50 PM
exists**
Aug 7, 2020, 4:50 PM
The snippet is for the Studio side of things: it lets you set up an extra field that is hidden or visible depending on the value of another field (for example when `label`’s value equals
'Other'
).
Alternatively, you could show the extra string field at all times, but this might be confusing to the editors. There’s currently no option to have a select + custom input on a single string field. You could decide to create such a field type as a custom input component as well I guess, but the conditional field route is probably faster.
Aug 7, 2020, 4:54 PM
Awesome, thanks!
Aug 7, 2020, 7:01 PM

Sanity.io – build remarkable experiences at scale

Sanity is a customizable solution that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.