Select

The Select component displays a list of options for users to choose from.

Anatomy

A Select component consists of the following parts:

SelectTrigger – The element that displays the currently selected value and opens the dropdown.

SelectContent – The container that shows the list of options.

SelectGroup – A container that groups related options together.

SelectLabel – A label at the top of the group to describe the options.
SelectItem – An individual option that users can select.

Adding a Select

To add a Select to your page, follow these steps:

Open the Insert Menu and navigate to Components.

Click or drag the Select onto your desired location on the page.

Guides

Using Select in Forms

The Select component is best used within a form to get validation and data handling out of the box. For this purpose, use the Select Field component, which comes with its own label and error handling.

To use a Select Field in a form:

Open the Insert Menu and navigate to Components.

Drag the Form component onto your page.

Remove any unnecessary components from the form.

With the form selected, open the Insert Menu again and choose the Select Field component within the form.

Label

Using the Select component with a Label will help users and screen readers understand what it's for.

To add a label to your Select component:

Add a Label component from the Insert Menu.

Drag the Select component inside the Label.

Position the Select relative to the Text element within the Label.

Use the Properties Panel to adjust the text style and spacing.

Disabled

To disable the entire Select so that users cannot interact with it:

Select the Select component.

Navigate to the Properties Panel.

Set the disabled property to true.

Disabled Items

If you need to disable specific items in the dropdown:

Select the individual SelectItem.

Open the Properties Panel.

Set the disabled property for that item to true.

Option Group

You can organize your select options into groups using the SelectGroup component. Each group comes with a SelectLabel to describe the group, and you can add multiple SelectItem components under it.

To add group options in your Select component:

Select the Select component.

In the SelectContent area, insert a SelectGroup component.

Edit the SelectLabel text element to define the group.

Add or remove SelectItem components within the group as needed.

Customizing the Select Trigger

You can customize the Select Trigger’s appearance, including its icon.

To style the Select Trigger:

Select the SelectTrigger component.

Go to the Properties Panel and adjust properties such as background color, border, and radius to match your design.

To replace the default icon:

Select the ChevronDown icon within the SelectTrigger.

Open the Insert Menu and navigate to Icons.

Hold Option (Mac) or Alt (Windows) and click on your preferred icon to replace the current one within the trigger.

Customizing the Select Content Style

To customize the select content:

Select the SelectContent component.

In the Properties Panel, adjust settings like padding, width, background color, text color, and border radius.

These settings help you achieve the desired look for the options list.

Customizing the Select Item Style

The individual Select items can also be styled to match your design.

To customize a Select item:

Select a SelectItem component.

Go to the Properties Panel.

Adjust the Border Radius (for example, set to 6px for slightly rounded corners).

In the States field, select the "Disabled" state to define how the item looks when it is disabled.

Scroll down to the Background Color setting and choose the desired text color for the disabled state.

Multiple Selection?

To allow users to select more than one option:

Select the Select component.

In the Properties Panel, set the multiple property to true.

Properties

Select

Property	Type	Default	Description
disabled	`boolean`	`false`	If `true`, prevents the user from interacting with the select.
onChange	`Action`	-	Event handler called when the value changes

SelectValue

Property	Type	Default	Description
placeholder	`string`	`‘Select’`	The text shown when no option is selected.

SelectItem

Property	Type	Default	Description
value	`string`	`‘option-1’`	The value assigned to the option.

Notes:

Disabled available but control is wrong