Version v3 Documentation
You are viewing documentation for an older version.
View latest (v4) documentation →
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.
Loading example…
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.
Loading example…
Multiple Selection Group
A toggle group with multiple selection. Multiple items can be active simultaneously. Set
Type to ToggleGroupType.Multiple and use @bind-Values.
Loading example…
Disabled
Toggle in disabled state. Set
Disabled to true to prevent user interaction.
Loading example…
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