Basic
<Select>
<option value="foo">foo</option>
<option value="bar">bar</option>
<option value="baz">baz</option>
</Select>
Controlled
See Controlled & Uncontrolled Components and Select Input. Passing
checked
and onChange
work because of ...rest
.<Select value={value} onChange={onChange}>
<option value="foo">foo</option>
<option value="bar">bar</option>
<option value="baz">baz</option>
</Select>
Size
Set
size
to either "sm"
, "md"
or "lg"
. Defaults to "md"
.<Stack class="w-fit gap-5">
<Select size="sm">
<option value="foo">foo</option>
<option value="bar">bar</option>
<option value="baz">baz</option>
</Select>
<Select size="md">
<option value="foo">foo</option>
<option value="bar">bar</option>
<option value="baz">baz</option>
</Select>
<Select size="lg">
<option value="foo">foo</option>
<option value="bar">bar</option>
<option value="baz">baz</option>
</Select>
</Stack>
Rounded
Set
rounded
to either "square"
, "sm"
, or "lg"
. Defaults to the value of the CSS variable --default-roundedness
. See "Default roundedness".<Stack class="w-fit gap-5">
<Select rounded="square">
<option value="foo">foo</option>
<option value="bar">bar</option>
<option value="baz">baz</option>
</Select>
<Select rounded="sm">
<option value="foo">foo</option>
<option value="bar">bar</option>
<option value="baz">baz</option>
</Select>
<Select rounded="lg">
<option value="foo">foo</option>
<option value="bar">bar</option>
<option value="baz">baz</option>
</Select>
</Stack>
Disabled
Set
disabled
to either true
or false
. Defaults to false
.<Select disabled>
<option value="foo">foo</option>
<option value="bar">bar</option>
<option value="baz">baz</option>
</Select>
Invalid
Set
invalid
to either true
or false
. Defaults to false
.<Select invalid>
<option value="foo">foo</option>
<option value="bar">bar</option>
<option value="baz">baz</option>
</Select>
Props
size
Required
false
Type
"sm" | "md" | "lg"
Default
"md"
rounded
Required
false
Type
"square" | "sm" | "lg" | "full"
Default
none
Notes
Defaults to the value of the CSS variable
--default-roundedness
. See "Default roundedness".disabled
Required
false
Type
boolean
Default
false
invalid
Required
false
Type
boolean
Default
false
...rest
Required
false
Type
Omit<ComponentProps<"select">, "size">
Default
none
Notes
See the docs for rest parameters. For
Select
, you could pass anything you normally would pass to <select>
because the return value looks something like this:<select
class={className}
{...restWithoutClass}
>
{children}
</select>