Toggle
A headless toggle primitive for building toggle buttons and toggle groups with pressed state management and keyboard navigation.
Standalone Toggle
A standalone toggle button with two-way binding. Use
@bind-Pressed to track the pressed state.
Bold: Off
Single Selection Group
A toggle group with single selection. Only one item can be active at a time. Use
@bind-Value for two-way binding.Alignment: left
Multiple Selection Group
A toggle group with multiple selection. Multiple items can be active simultaneously. Set
Type to ToggleGroupType.Multiple and use @bind-Values.Active: none
Disabled
Toggle in disabled state. Set
Disabled to true to prevent user interaction.
Disabled (off)
Disabled (on)
Data Attributes
Use these data attributes for CSS styling:
[data-state="on"]- When the toggle or group item is pressed/active[data-state="off"]- When the toggle or group item is not pressed/active[data-disabled]- When disabled
Keyboard Navigation
Standalone BbToggle:
- Space / Enter - Toggle pressed state
BbToggleGroup:
- → / ← - Move between items (horizontal)
- ↓ / ↑ - Move between items (vertical)
- Home - Move to first enabled item
- End - Move to last enabled item