Toggle

The default toggle uses a transparent background that switches to accent when pressed. Bind the pressed state with @bind-Pressed for two-way data binding, or use DefaultPressed for uncontrolled mode.

Use the Variant parameter to change the visual style. Default has a flat background, while Outline adds a visible border that makes the toggle stand out in layouts where the background is already muted.

Combine an icon with descriptive text for toggles that need a clear label. Add spacing between the icon and text with mr-2. This pattern works well in settings panels where the user needs to understand what the toggle controls.

Control the toggle dimensions with the Size parameter. Available sizes are Small (compact toolbars), Default (standard use), and Large (touch-friendly interfaces). Adjust the icon size to match — h-3 w-3 for small, h-4 w-4 for default, and h-5 w-5 for large.

Set Disabled to true to prevent user interaction. Disabled toggles have reduced opacity and do not fire the PressedChanged event, making them suitable for features that are temporarily unavailable.

Use the Class parameter to apply custom Tailwind CSS classes for project-specific styling. Override the pressed state appearance with data-[state=on]: modifiers for gradients, custom colours, or unique shapes.

A real-world pattern showing multiple toggles in a toolbar for text formatting. Each toggle independently tracks its own pressed state, letting users combine bold, italic, underline, and strikethrough in any combination.