Switch

The default Switch paired with a Label using the Id and For attributes for accessible label association. The switch slides between on and off states with smooth transitions.

A Switch placed alongside a label and helper text inside a bordered container. This pattern is common for settings pages where each option needs additional context to help users understand the impact of their choice.

Use the Size parameter to control the switch dimensions. Available sizes are Small for compact layouts, Medium (default) for standard usage, and Large for prominent toggle actions.

Set Disabled to true to prevent user interaction. Disabled switches have reduced opacity and do not respond to clicks or keyboard input. Both off and on states are demonstrated.

Use the Class parameter to apply custom Tailwind CSS classes for project-specific track styles. You can change the checked background color to match your brand palette without creating a new component.

Render custom content inside the thumb using ThumbContent. The context parameter provides the checked state for conditional rendering.

Customize the track and thumb independently. Use ThumbCheckedClass and ThumbUncheckedClass for state-dependent thumb styles.

Switch integrated with Blazor's EditForm and validation. Use @bind-Checked with a model property annotated with validation attributes like [Range] to enforce required acceptance.

A common real-world pattern: a vertical list of settings, each with a Label, helper text, and a Switch bound to a boolean field via @bind-Checked. This layout is ideal for application preference pages where each toggle takes immediate effect.