Variants
Example of Segmented control - default
<BcSegmentedControl legendContent='Filter date range'> <BcSegmentedControl.Button isActive>Write</BcSegmentedControl.Button> <BcSegmentedControl.Button>Preview</BcSegmentedControl.Button> </BcSegmentedControl>
React documentation
Last modified:
A sliding toggle control for a mutually exclusive set of options.
BcSegmentedControl props
| Prop | Type | Required? | Default | Description |
|---|---|---|---|---|
| isFullWidth | boolean | false | false | Used to display as block level element. |
| legendContent | string | true | false | Used to display the fieldset’s <legend>. |
Any extended types: React.FieldsetHTMLAttributes<HTMLFieldSetElement>
BcSegmentedControl.Button
Used to display the <button> element.
| Prop | Type | Description |
|---|---|---|
| isActive | boolean | Used to set the state of the <button> element. |
Any extended types: React.ButtonHTMLAttributes<HTMLButtonElement>
BcSegmentedControl.Radio
Used to display the input type radio element.
| Prop | Type | Description |
|---|---|---|
| isActive | boolean | Used to set the state of the <input type='radio'> element. |
Any extended types: React.InputHTMLAttributes<HTMLInputElement>
HTML
Last modified:
- Ensure the selection takes immediate effect (i.e. does not require a form Save submit button). See radio Control inputs.
- Use radio
<input>sets for configuration form contexts. - Use
<button>sets for toggling interaction states, eg. “Write” and “Preview” in an editor. - When using
<button>sets:- Dynamically toggle the active styling using the
aria-selectedboolean - Use
aria-controlsto associate the state toggles with their controlled content.
- Dynamically toggle the active styling using the
- Use short and meaningful labels for the choices to maintain a roughly equal visual balance between each choice.
- Do not truncate or wrap label text.
- Do not use for binary (eg. “On”/“Off”) choices --- see Switch inputs instead.
- Do not use for add/remove actions.
- Do not use Badge counters within this component.
Design
Last modified:
Segmented controls are 100% container width at <xs media query breakpoint. At ≥xs the component uses CSS intrinsic sizing (min-content).
The --block variant retains the 100% width at all breakpoints. Use this for precise sizing within a column of a grid system.
Accessibility
Last modified:
Rationale
Last modified:
Segmented control is used to pick one choice from a linear set of closely related choices, and immediately apply that selection.
Use for live toggling between a set of up to 3 mutually exclusive but related choices.
A segmented control should not be used as a form of navigation: use Tabbed Nav instead. If your primary use case is to hide or show content, that’s a good hint that you should reach for tabs or another navigation pattern instead.
See also
Last modified: