Components
Checkbox
A labeled checkbox with a custom visual indicator and bindable checked state.
Props
Native attributes and event handlers are forwarded to the underlying input element
unless handled by the component.
Class styles the wrapping label. Native input attributes, including name, required, and disabled, are forwarded to the hidden checkbox input.
| Prop | Type | Default | Description |
|---|---|---|---|
checked | boolean | false | Bindable checked state of the native checkbox. |
children | Snippet | undefined | Content snippet rendered by the component. |
class | string | '' | Tailwind classes merged with the theme and variants. |
element | HTMLInputElement | null | null | Bindable reference to the underlying DOM element. |
inTransition | TransitionProps | undefined | Overrides the opening transition. |
isVisible | boolean | true | Bindable visibility state. |
outTransition | TransitionProps | undefined | Overrides the closing transition. |
snippet | Snippet | undefined | Snippet replacing the checkbox visual indicator. |
theme | Theme | global theme | Optional local theme override. |
transition | TransitionProps | [noopTransition, {}] | A Svelte transition function and its options. |
variants | string[] | [] | Local variant names or theme references such as button.base. |
Default usage
Import Checkbox from sveltewind/components. This example shows its default styling in a usable context.
Loading...Examples
Theme variants
Every variant available for Checkbox in the built-in themes is shown below.
compact — Apply the compact variant.
Loading...comfortable — Apply the comfortable variant.
Loading...full — Apply the full variant.
Loading...secondary — Apply the secondary variant.
Loading...Class overrides
Apply rounded-xl border border-primary-500/40 p-4 locally.
Loading...Props and behavior
Change disabled while retaining the default component styling.
Loading...Content and values
Provide different value values.
Loading...Bind checked state
Bind checked to keep application state in sync with the control.
Updates: disabled
Loading...