Skip to content
StudioCMS
UI
Docs

Select (Searchable)

A variation of the <Select /> element that supports arrow keys and filtering.

Can be used as a drop-in replacement.

Usage

'Read the “', Usage, '” section'
  • Option 1
  • Option 2
  • Option 3

Default Value

'Read the “', Default Value, '” section'

You can set a default value using the defaultValue prop:

  • Option 1
  • Option 2
  • Option 3

Form Support

'Read the “', Form Support, '” section'

You can use the isRequired prop to mark the select input as required. This will also add a red * to the label.

If you need to access the element’s value later on, you can pass the name prop. It will then appear in any FormData you construct. If no name is set, a random one is generated for the component.

Additionally, you can either disable the entire select input by using the disabled prop, or disable individual options by adding disabled: true to the option you want to disable:

SearchSelectFormExample.astro
---
import { SearchSelect } from '@studiocms/ui/components';
---


<SearchSelect
  label='Searchable Select Element'
  defaultValue='opt-1'
  isRequired
  disabled
  name='searchable-select-element'
  options={[
    // ...
    {
      label: 'Option X',
      value: 'opt-x',
      disabled: true
    },
    // ...
  ]}
/>

Full Width

'Read the “', Full Width, '” section'

Normally, the input has a minimum width and extends as needed. You can force it to take up the entire width of its parent container by setting the fullWidth prop to true:

  • Option 1
  • Option 2
  • Option 3

Placeholder

'Read the “', Placeholder, '” section'

You can adjust the placeholder shown in the select by passing the placeholder prop:

  • Option 1
  • Option 2
  • Option 3