Array schema layout options in Sanity (tags, grid, radio, dropdown, etc.)

3 replies

Last updated: Sep 22, 2021

Can someone clue me into what are all of the array schema type layout options? In the docs it refers to

'tags'

'grid'

, but in some of the example projects I can see that

'radio'

is also used. Are there other options like

'dropdown'

'multi-select'

or other common components? or is this something where you can pick from some of the sanity-ui components?

AI Update

Great question! The layout options are spread across different schema types, so let me break down what's actually available:

For Array Types

Arrays do have built-in layout options according to the official documentation:

'tags' - Renders the array as a single, tokenized input field (like tags). Important: This only works if the array contains strings.
'grid' - Displays array items in a grid layout.

When using the list option (predefined values), you can also set:

'vertical' (default) - Displays checkboxes in a column
'grid' - Displays checkboxes horizontally

Example with tags layout:

{
  title: 'Tags',
  name: 'tags',
  type: 'array',
  of: [{type: 'string'}],
  options: {
    layout: 'tags'
  }
}

Example with grid layout:

{
  title: 'Items',
  name: 'items',
  type: 'array',
  of: [{type: 'object', ...}],
  options: {
    layout: 'grid'
  }
}

For String and Number Types with `options.list`

When you have a string type or number type with a predefined list of values, you get these layout options:

'dropdown' (default) - Shows a dropdown/select menu
'radio' - Shows radio buttons

You can also control the direction of radio buttons:

'vertical' (default)
'horizontal'

Example:

{
  name: 'genre',
  type: 'string',
  options: {
    list: [
      {title: 'Sci-Fi', value: 'sci-fi'},
      {title: 'Western', value: 'western'}
    ],
    layout: 'radio', // or 'dropdown'
    direction: 'horizontal' // only works with radio
  }
}

No Other Built-in Options

Unfortunately, there aren't other built-in layout options like a standalone 'multi-select' or additional dropdown variants. The complete list is:

Arrays: tags, grid, or default list view
String/Number with list: dropdown or radio

Need Something More Custom?

If you need specialized layouts beyond these options, you have a few paths:

Custom input components - Arrays and other types support extensive customization through the components property where you can provide custom input components using Sanity UI components
Plugin ecosystem - Check the Sanity plugin directory for pre-built solutions
Array of strings - For multi-select functionality, an array of strings with checkboxes (using the list option) works well

Hope that clears things up!

Show original thread

3 replies

Hey User! I can see where the confusion comes from here. The tag and grid layouts work on an array of strings , whereas a list of strings can have the radio or drop down layouts.
If you're looking for a multi-select, the out of the box way would be to create an array with a predefined list, like this:

{
  title: 'Category Set',
  name: 'categorySet',
  type: 'array',
  of: [{type: 'string'}],
  options: {
    list: [
      {title: 'Building', value: 'building'},
      {title: 'Master plan', value: 'masterPlan'},
      {title: 'Infrastructure', value: 'infrastructure'},
      {title: 'Private Home', value: 'privateHome'}
    ]
  }
}

Thanks

user M

! This was super helpful! Can all of the options be defined somewhere in the documentation, and or maybe organized based on use-cases, like the one you provided?
Also what other

of:

options are there besides

type: 'string'

object

, and

type: 'block'

for lists, objects, and portable text respectively. Are there types of data that can be represented?

Yeah, I don't think I realized how complicated it is to find each of these different types in the documentation until putting together this answer for you! I'll start thinking of better ways to present this, whether that be changes to the docs or a guide that sort of walks folks through these different options.
In regards to

of

, as you mentioned, there's

string

block

, and any of the custom

object

types you create, but you can also have an array of references to other documents in your dataset (like the example in this piece of the docs).
It's also important to note that if want to be able to insert custom objects or images into your portable text editor, all you have to do is add those objects to the array that contains that

block

. That could be a confusing sentence, but it's much more clearly explained here .

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 free Explore the demo