Skip to main content
Select dropdowns let users pick one option from a list.

​
Basic Usage

​
With Selected Value

​
Sizes

​
With Label

​
API Reference

Select Parameters

​
placeholder
str | None
default:"None"
Placeholder text shown when no option is selected.
​
name
str | None
default:"None"
Form field name for submission.
​
size
str
default:"default"
Select size: "default", "sm".
​
disabled
bool
default:"False"
Whether the select is non-interactive.
​
required
bool
default:"False"
Whether a selection is required for form submission.
​
css_class
str | None
default:"None"
Additional Tailwind CSS classes appended to the component’s built-in styles.

SelectOption Parameters

​
value
str
required
Option value for form submission.
​
label
str
required
Display text shown to the user.
​
selected
bool
default:"False"
Whether this option is initially selected.
​
disabled
bool
default:"False"
Whether this option is non-interactive.
​
css_class
str | None
default:"None"
Additional Tailwind CSS classes.

​
Protocol Reference

Select
{
  "type": "Select",
  "children?": "[Component]",
  "placeholder?": "string",
  "name?": "string",
  "size?": "sm | default",
  "disabled?": false,
  "required?": false,
  "onChange?": "Action | Action[]",
  "cssClass?": "string"
}
SelectOption
{
  "type": "SelectOption",
  "value": "string (required)",
  "label": "string (required)",
  "selected?": false,
  "disabled?": false,
  "cssClass?": "string"
}
For the complete protocol schema, see Select, SelectOption.