Components
Input
A themed native input with a bindable value.
Props
Native attributes and event handlers are forwarded to the underlying input element
unless handled by the component.
Input does not render children. Use Label or aria-label to give the input an accessible name.
| Prop | Type | Default | Description |
|---|---|---|---|
checked | boolean | null | undefined | Bindable checked state for checkbox inputs. |
children | Snippet | undefined | Accepted for API consistency; not rendered by this component. |
class | string | '' | Tailwind classes merged with the theme and variants. |
element | HTMLInputElement | null | null | Bindable reference to the underlying DOM element. |
group | any | undefined | Bindable selected value for radio inputs. |
inTransition | TransitionProps | undefined | Overrides the opening transition. |
isVisible | boolean | true | Bindable visibility state. |
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. |
type | HTMLInputAttributes["type"] | 'text' | Native input type; checkbox and radio inputs use their appropriate bindings. |
value | HTMLInputAttributes["value"] | 'on' for checkbox/radio; '' otherwise | Bindable current text or numeric value; submission value for checkbox/radio. File inputs remain native and are read through element.files. |
variants | string[] | [] | Local variant names or theme references such as button.base. |
Default usage
Import Input from sveltewind/components. This example shows its default styling in a usable context.
Loading...Examples
Theme variants
Every variant available for Input 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 type, autocomplete while retaining the default component styling.
Loading...Content and values
Provide different value, placeholder values.
Loading...Bind the value
Bind value to read and update text as the user types.
Hello, friend.
Loading...