Bugcrowd Design System

Search/

Segmented control

Last modified:

A sliding toggle control for a mutually exclusive set of options.

Back to top

Variants

Example of Segmented control - default

<BcSegmentedControl legendContent='Filter date range'>
  <BcSegmentedControl.Button isActive>Write</BcSegmentedControl.Button>
  <BcSegmentedControl.Button>Preview</BcSegmentedControl.Button>
</BcSegmentedControl>
Open in Playroom

React documentation

Last modified:

A sliding toggle control for a mutually exclusive set of options.

BcSegmentedControl props

PropTypeRequired?DefaultDescription
isFullWidthbooleanfalsefalseUsed to display as block level element.
legendContentstringtruefalseUsed to display the fieldset’s <legend>.

Any extended types: React.FieldsetHTMLAttributes<HTMLFieldSetElement>

BcSegmentedControl.Button

Used to display the <button> element.

PropTypeDescription
isActivebooleanUsed to set the state of the <button> element.

Any extended types: React.ButtonHTMLAttributes<HTMLButtonElement>

BcSegmentedControl.Radio

Used to display the input type radio element.

PropTypeDescription
isActivebooleanUsed 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-selected boolean
    • Use aria-controls to associate the state toggles with their controlled content.
  • 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: