Two-way Binding

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

Reactive State

The switch automatically updates when the bound variable changes, and vice versa.

Size Property

The size prop controls the height (and width for square switches) in pixels.

Responsive Design

Consider using CSS media queries or responsive size values for different screen sizes.

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.

Layout Considerations

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

Size Recommendations

Consider using larger sizes for vertical switches to maintain good usability and visual balance.

onToggle Callback

The onToggle prop accepts a function that receives the new state value.

Common Use Cases

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