Two-way Binding

Use bind:checked to create a two-way binding between the switch and your component state.

Reactive State

The switch reflects changes to the bound variable instantly, and updates the variable when toggled by the user.

Default On-State

In v2.0 the on-state surface picks up --base-accent-color via --sw-bg-on. Override either to change the colour without touching the off-state.

How Numeric Sizing Works

A numeric size sets --scale = size / 50. So size={50} renders the natural 32px height, size={80} scales it to ~51px, and so on.

When to Use Numeric

Use numeric size for one-off displays where you need an exact pixel value. For form-aligned defaults, use named sizes instead (next section).

Form-Aligned Defaults

'md' is now the default size — switches drop into pure-admin forms next to inputs without per-instance config.

Themable Heights

Each named size resolves through --base-input-size-{name}-height, so a parent with --base-input-size-md-height: 4.0 rescales every default switch underneath.

See also

The Sizes page has the full table and pure-admin integration recipe.

When to Disable

• During async operations
• When permissions are insufficient
• For read-only configuration display
• When dependencies aren't met

Accessibility

Disabled switches are properly marked with ARIA attributes for screen readers and skip focus order.

Layout Considerations

Vertical switches work well in compact layouts or when you need to save horizontal space.

Size Recommendations

Vertical switches benefit from larger sizes for usability — consider a numeric size of 60–100px or use 'lg' / 'xl'.

onToggle Callback

The onToggle prop accepts a function that receives the new state value as its only argument.

Common Use Cases

• Logging state changes
• Triggering API calls
• Updating other UI elements
• Form validation