mirror of
https://github.com/bitwarden/browser
synced 2026-02-13 23:13:36 +00:00
51 lines
1.5 KiB
Plaintext
51 lines
1.5 KiB
Plaintext
import { Meta, Story, Primary, Controls, Canvas } from "@storybook/addon-docs";
|
||
|
||
import * as stories from "./toggle-group.stories";
|
||
|
||
<Meta of={stories} />
|
||
|
||
# Toggle Group
|
||
|
||
Toggle groups are used for quick filters for a data set. **Example:** the Member’s page of the Admin
|
||
Console uses a toggle group to filter members by their organization status: all, invited, needs
|
||
confirmation, revoked.
|
||
|
||
Toggle groups function as radio buttons and a radio group under the hood.
|
||
|
||
A button in a toggle group can have a badge counter added to show the number of items existing
|
||
within that filter.
|
||
|
||
## Default
|
||
|
||
<Canvas of={stories.Default} />
|
||
|
||
<Controls />
|
||
|
||
## Label wrap
|
||
|
||
If the labels in a toggle group would overflow the width of the toggle group container, then the
|
||
labels will wrap to 2 lines and truncate with an ellipsis past that. The full label text is
|
||
accessible via the `title` prop (i.e. visible on hover).
|
||
|
||
<Canvas of={stories.LabelWrap} />
|
||
|
||
## Full width
|
||
|
||
If a toggle group should span the width of its container, pass the `fullWidth` input to the toggle
|
||
group.
|
||
|
||
```
|
||
<bit-toggle-group fullWidth>
|
||
...toggle components here...
|
||
</bit-toggle-group>
|
||
```
|
||
|
||
<Canvas of={stories.FullWidth} />
|
||
|
||
# Accessibility
|
||
|
||
- Since only 1 button can be selected at a time, the toggle group acts similarly to a radio group.
|
||
- The user may navigate the options via left/right arrow keys.
|
||
- The screen reader will announce the button group: example “[context label], [button content]
|
||
selected, of [# of buttons]”), the number of buttons and the currently selected button.
|