Components
Select
A themed native select with generated options or custom option content.
Props
Native attributes and event handlers are forwarded to the underlying select element
unless handled by the component.
| Prop | Type | Default | Description |
|---|---|---|---|
children | Snippet | undefined | Content snippet rendered by the component. |
class | string | '' | Tailwind classes merged with the theme and variants. |
element | HTMLSelectElement | null | null | Bindable reference to the underlying DOM element. |
inTransition | TransitionProps | undefined | Overrides the opening transition. |
isVisible | boolean | true | Bindable visibility state. |
options | { label: any; value: any }[] | [] | Bindable list of label/value objects; children override generated options. |
outTransition | TransitionProps | undefined | Overrides the closing transition. |
theme | Theme | global theme | Optional local theme override. |
transition | TransitionProps | [noopTransition, {}] | A Svelte transition function and its options. |
value | any | '' | Bindable current value of the control. |
variants | string[] | [] | Local variant names or theme references such as button.base. |
Default usage
Import Select from sveltewind/components. This example shows its default styling in a usable context.
Loading...Examples
Theme variants
Every variant available for Select in the built-in themes is shown below.
lg — Apply the lg variant.
Loading...md — Apply the md variant.
Loading...sm — Apply the sm variant.
Loading...xs — Apply the xs variant.
Loading...error — Apply the error variant.
Loading...filled — Apply the filled variant.
Loading...success — Apply the success variant.
Loading...unstyled — Apply the unstyled variant.
Loading...secondary — Apply the secondary variant.
Loading...Class overrides
Apply rounded-none border-primary-500 shadow-none locally.
Loading...Props and behavior
Change disabled while retaining the default component styling.
Loading...Content and values
Provide different aria-label values.
Loading...Custom options and binding
Provide Option children and bind the selected value.
Selected: starter
Loading...