Components
Radio
A styled native radio input with a bindable group.
Props
Native attributes and event handlers are forwarded to the underlying input element
unless handled by the component.
The handle snippet replaces the native input. Use isVisible to hide the control.
| Prop | Type | Default | Description |
|---|---|---|---|
children | Snippet | undefined | Accepted for API consistency; use handle to replace the native input. |
class | string | '' | Tailwind classes merged with the theme and variants. |
element | HTMLInputElement | null | null | Bindable reference to the underlying DOM element. |
group | any | '' | Bindable selected value shared by related radio controls. |
handle | Snippet | undefined | Snippet replacing the native radio input. |
inTransition | TransitionProps | undefined | Overrides the opening transition. |
isVisible | boolean | true | Bindable visibility state for the native input or custom handle. |
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 | '' | Value of the control. |
variants | string[] | [] | Local variant names or theme references such as button.base. |
Default usage
Import Radio from sveltewind/components. This example shows its default styling in a usable context.
Loading...Examples
Theme variants
Every variant available for Radio in the built-in themes is shown below.
compact — Apply the compact variant.
Loading...comfortable — Apply the comfortable variant.
Loading...large — Apply the large variant.
Loading...secondary — Apply the secondary variant.
Loading...Class overrides
Increase the control size and customize its border while retaining a square aspect ratio.
Loading...Props and behavior
Change disabled while retaining the default component styling.
Loading...Content and values
Provide different value values.
Loading...Share a group
Bind related radios to the same group state and give them distinct values.
Selected: starter
Loading...