Buttonbar

A set of closely related controls or actions, where selecting one applies it immediately.

UsageAPI

Use Buttonbar...

To pick one choice from a linear set of closely related choices (such as “Front” and “Back”) and immediately apply that selection.
To select between 2-5 choices.
As a toggle control when the choices are not “on” or “off”.

Don't use Buttonbar...

As a form of navigation.
To select more than 6+ choices, as this can be difficult to parse and take up too much horizontal space. Use a Dropdown or Listbox instead.
As a toggle control when the choices are “on” or “off”. Use a Toggle Switch instead.

Width

Use width="full-width" to grow a Buttonbar to fill its container.

ReactVanilla

<Buttonbar
  variant="single-select"
  defaultSelectedValue="B"
  width="full-width"
  aria-label="Full width Buttonbar"
>
  <ButtonbarButton value="A">
    <ButtonbarButtonLabel>Radio 1</ButtonbarButtonLabel>
  </ButtonbarButton>
  <ButtonbarButton value="B">
    <ButtonbarButtonLabel>Radio 2</ButtonbarButtonLabel>
  </ButtonbarButton>
  <ButtonbarButton value="C">
    <ButtonbarButtonLabel>Radio 3</ButtonbarButtonLabel>
  </ButtonbarButton>
  <ButtonbarButton value="D" disabled>
    <ButtonbarButtonLabel>Radio disabled</ButtonbarButtonLabel>
  </ButtonbarButton>
</Buttonbar>

<Buttonbar
  variant="single-select"
  defaultSelectedValue="B"
  width="full-width"
  aria-label="Full width Buttonbar"
>
  <ButtonbarButton value="A">
    <ButtonbarButtonLabel>Radio 1</ButtonbarButtonLabel>
  </ButtonbarButton>
  <ButtonbarButton value="B">
    <ButtonbarButtonLabel>Radio 2</ButtonbarButtonLabel>
  </ButtonbarButton>
  <ButtonbarButton value="C">
    <ButtonbarButtonLabel>Radio 3</ButtonbarButtonLabel>
  </ButtonbarButton>
  <ButtonbarButton value="D" disabled>
    <ButtonbarButtonLabel>Radio disabled</ButtonbarButtonLabel>
  </ButtonbarButton>
</Buttonbar>

<div class="swan-buttonbar swan-buttonbar-full-width">
  <input
    type="radio"
    class="swan-radio"
    value="A"
    id="auto-id-vfbic16rp-216"
    name="auto-id-vfbic16rp-220"
  /><label for="auto-id-vfbic16rp-216">Radio 1</label
  ><input
    type="radio"
    class="swan-radio"
    value="B"
    checked=""
    id="auto-id-vfbic16rp-217"
    name="auto-id-vfbic16rp-220"
  /><label for="auto-id-vfbic16rp-217">Radio 2</label
  ><input
    type="radio"
    class="swan-radio"
    value="C"
    id="auto-id-vfbic16rp-218"
    name="auto-id-vfbic16rp-220"
  /><label for="auto-id-vfbic16rp-218">Radio 3</label
  ><input
    type="radio"
    disabled=""
    class="swan-radio"
    value="D"
    id="auto-id-vfbic16rp-219"
    name="auto-id-vfbic16rp-220"
  /><label for="auto-id-vfbic16rp-219">Radio disabled</label>
</div>

<div class="swan-buttonbar swan-buttonbar-full-width">
  <input
    type="radio"
    class="swan-radio"
    value="A"
    id="auto-id-vfbic16rp-216"
    name="auto-id-vfbic16rp-220"
  /><label for="auto-id-vfbic16rp-216">Radio 1</label
  ><input
    type="radio"
    class="swan-radio"
    value="B"
    checked=""
    id="auto-id-vfbic16rp-217"
    name="auto-id-vfbic16rp-220"
  /><label for="auto-id-vfbic16rp-217">Radio 2</label
  ><input
    type="radio"
    class="swan-radio"
    value="C"
    id="auto-id-vfbic16rp-218"
    name="auto-id-vfbic16rp-220"
  /><label for="auto-id-vfbic16rp-218">Radio 3</label
  ><input
    type="radio"
    disabled=""
    class="swan-radio"
    value="D"
    id="auto-id-vfbic16rp-219"
    name="auto-id-vfbic16rp-220"
  /><label for="auto-id-vfbic16rp-219">Radio disabled</label>
</div>

Single-select

Use single-select when you want only one value to be selected at a time. The Buttonbar will act as a set of radio buttons.

ReactVanilla

<Buttonbar
  variant="single-select"
  defaultSelectedValue="B"
  aria-label="Single-select Buttonbar"
>
  <ButtonbarButton value="A">
    <ButtonbarButtonLabel>Radio 1</ButtonbarButtonLabel>
  </ButtonbarButton>
  <ButtonbarButton value="B">
    <ButtonbarButtonLabel>Radio 2</ButtonbarButtonLabel>
  </ButtonbarButton>
</Buttonbar>

<Buttonbar
  variant="single-select"
  defaultSelectedValue="B"
  aria-label="Single-select Buttonbar"
>
  <ButtonbarButton value="A">
    <ButtonbarButtonLabel>Radio 1</ButtonbarButtonLabel>
  </ButtonbarButton>
  <ButtonbarButton value="B">
    <ButtonbarButtonLabel>Radio 2</ButtonbarButtonLabel>
  </ButtonbarButton>
</Buttonbar>

<div class="swan-buttonbar">
  <input
    type="radio"
    class="swan-radio"
    value="A"
    id="auto-id-vfbic16rp-208"
    name="auto-id-vfbic16rp-210"
  /><label for="auto-id-vfbic16rp-208">Radio 1</label
  ><input
    type="radio"
    class="swan-radio"
    value="B"
    checked=""
    id="auto-id-vfbic16rp-209"
    name="auto-id-vfbic16rp-210"
  /><label for="auto-id-vfbic16rp-209">Radio 2</label>
</div>

<div class="swan-buttonbar">
  <input
    type="radio"
    class="swan-radio"
    value="A"
    id="auto-id-vfbic16rp-208"
    name="auto-id-vfbic16rp-210"
  /><label for="auto-id-vfbic16rp-208">Radio 1</label
  ><input
    type="radio"
    class="swan-radio"
    value="B"
    checked=""
    id="auto-id-vfbic16rp-209"
    name="auto-id-vfbic16rp-210"
  /><label for="auto-id-vfbic16rp-209">Radio 2</label>
</div>

To set a default state:

In the React API, use defaultSelectedValue on the Buttonbar to specify an initial state.
In the Vanilla API, put a checked property onto the radio button that should be selected by default.

To control the state of the React API Buttonbar component, use the selectedValue and onSelectedValueChange props. onSelectedValueChange will be invoked with the new value as the first argument and the actual <input> event as the second argument in case you need it.

ReactVanilla

() => {
  const [selectedValue, setSelectedValue] = React.useState('B')
  return (
    <Buttonbar
      variant="single-select"
      aria-label="Controlled single-select Buttonbar"
      selectedValue={selectedValue}
      onSelectedValueChange={(newSelectedValue, event) =>
        setSelectedValue(newSelectedValue)
      }
    >
      <ButtonbarButton value="A">
        <ButtonbarButtonLabel>Radio 1</ButtonbarButtonLabel>
      </ButtonbarButton>
      <ButtonbarButton value="B">
        <ButtonbarButtonLabel>Radio 2</ButtonbarButtonLabel>
      </ButtonbarButton>
      <ButtonbarButton value="C">
        <ButtonbarButtonLabel>Radio 3</ButtonbarButtonLabel>
      </ButtonbarButton>
      <ButtonbarButton value="D" disabled>
        <ButtonbarButtonLabel>Radio disabled</ButtonbarButtonLabel>
      </ButtonbarButton>
    </Buttonbar>
  )
}

() => {
  const [selectedValue, setSelectedValue] = React.useState('B')
  return (
    <Buttonbar
      variant="single-select"
      aria-label="Controlled single-select Buttonbar"
      selectedValue={selectedValue}
      onSelectedValueChange={(newSelectedValue, event) =>
        setSelectedValue(newSelectedValue)
      }
    >
      <ButtonbarButton value="A">
        <ButtonbarButtonLabel>Radio 1</ButtonbarButtonLabel>
      </ButtonbarButton>
      <ButtonbarButton value="B">
        <ButtonbarButtonLabel>Radio 2</ButtonbarButtonLabel>
      </ButtonbarButton>
      <ButtonbarButton value="C">
        <ButtonbarButtonLabel>Radio 3</ButtonbarButtonLabel>
      </ButtonbarButton>
      <ButtonbarButton value="D" disabled>
        <ButtonbarButtonLabel>Radio disabled</ButtonbarButtonLabel>
      </ButtonbarButton>
    </Buttonbar>
  )
}

<div class="swan-buttonbar">
  <input
    type="radio"
    class="swan-radio"
    value="A"
    id="auto-id-vfbic16rp-221"
    name="auto-id-vfbic16rp-225"
  /><label for="auto-id-vfbic16rp-221">Radio 1</label
  ><input
    type="radio"
    class="swan-radio"
    value="B"
    checked=""
    id="auto-id-vfbic16rp-222"
    name="auto-id-vfbic16rp-225"
  /><label for="auto-id-vfbic16rp-222">Radio 2</label
  ><input
    type="radio"
    class="swan-radio"
    value="C"
    id="auto-id-vfbic16rp-223"
    name="auto-id-vfbic16rp-225"
  /><label for="auto-id-vfbic16rp-223">Radio 3</label
  ><input
    type="radio"
    disabled=""
    class="swan-radio"
    value="D"
    id="auto-id-vfbic16rp-224"
    name="auto-id-vfbic16rp-225"
  /><label for="auto-id-vfbic16rp-224">Radio disabled</label>
</div>

<div class="swan-buttonbar">
  <input
    type="radio"
    class="swan-radio"
    value="A"
    id="auto-id-vfbic16rp-221"
    name="auto-id-vfbic16rp-225"
  /><label for="auto-id-vfbic16rp-221">Radio 1</label
  ><input
    type="radio"
    class="swan-radio"
    value="B"
    checked=""
    id="auto-id-vfbic16rp-222"
    name="auto-id-vfbic16rp-225"
  /><label for="auto-id-vfbic16rp-222">Radio 2</label
  ><input
    type="radio"
    class="swan-radio"
    value="C"
    id="auto-id-vfbic16rp-223"
    name="auto-id-vfbic16rp-225"
  /><label for="auto-id-vfbic16rp-223">Radio 3</label
  ><input
    type="radio"
    disabled=""
    class="swan-radio"
    value="D"
    id="auto-id-vfbic16rp-224"
    name="auto-id-vfbic16rp-225"
  /><label for="auto-id-vfbic16rp-224">Radio disabled</label>
</div>

Multi-select

Use multi-select when you want to allow multiple options to be selected at the same time. The Buttonbar will act as a series of checkboxes.

ReactVanilla

<Buttonbar
  variant="multi-select"
  defaultSelectedValues={['A', 'C']}
  aria-label="Multi-select Buttonbar"
>
  <ButtonbarButton value="A">
    <ButtonbarButtonLabel>Check 1</ButtonbarButtonLabel>
  </ButtonbarButton>
  <ButtonbarButton value="B">
    <ButtonbarButtonLabel>Check 2</ButtonbarButtonLabel>
  </ButtonbarButton>
  <ButtonbarButton value="C">
    <ButtonbarButtonLabel>Check 3</ButtonbarButtonLabel>
  </ButtonbarButton>
</Buttonbar>

<Buttonbar
  variant="multi-select"
  defaultSelectedValues={['A', 'C']}
  aria-label="Multi-select Buttonbar"
>
  <ButtonbarButton value="A">
    <ButtonbarButtonLabel>Check 1</ButtonbarButtonLabel>
  </ButtonbarButton>
  <ButtonbarButton value="B">
    <ButtonbarButtonLabel>Check 2</ButtonbarButtonLabel>
  </ButtonbarButton>
  <ButtonbarButton value="C">
    <ButtonbarButtonLabel>Check 3</ButtonbarButtonLabel>
  </ButtonbarButton>
</Buttonbar>

<div class="swan-buttonbar">
  <input
    type="checkbox"
    class="swan-checkbox"
    value="A"
    checked=""
    id="auto-id-vfbic16rp-211"
    name="auto-id-vfbic16rp-214"
  /><label for="auto-id-vfbic16rp-211">Check 1</label
  ><input
    type="checkbox"
    class="swan-checkbox"
    value="B"
    id="auto-id-vfbic16rp-212"
    name="auto-id-vfbic16rp-214"
  /><label for="auto-id-vfbic16rp-212">Check 2</label
  ><input
    type="checkbox"
    class="swan-checkbox"
    value="C"
    checked=""
    id="auto-id-vfbic16rp-213"
    name="auto-id-vfbic16rp-214"
  /><label for="auto-id-vfbic16rp-213">Check 3</label>
</div>

<div class="swan-buttonbar">
  <input
    type="checkbox"
    class="swan-checkbox"
    value="A"
    checked=""
    id="auto-id-vfbic16rp-211"
    name="auto-id-vfbic16rp-214"
  /><label for="auto-id-vfbic16rp-211">Check 1</label
  ><input
    type="checkbox"
    class="swan-checkbox"
    value="B"
    id="auto-id-vfbic16rp-212"
    name="auto-id-vfbic16rp-214"
  /><label for="auto-id-vfbic16rp-212">Check 2</label
  ><input
    type="checkbox"
    class="swan-checkbox"
    value="C"
    checked=""
    id="auto-id-vfbic16rp-213"
    name="auto-id-vfbic16rp-214"
  /><label for="auto-id-vfbic16rp-213">Check 3</label>
</div>

To set a default state:

In the React API, use defaultSelectedValues on the Buttonbar to specify an initial state.
In the Vanilla API, put a checked property onto the radio button that should be selected by default.

To control the state of the React API Buttonbar component, use the selectedValues and onSelectedValuesChange props. selectedValues is an array of selected values. onSelectedValuesChange will be invoked with an updated array of selected values as the first argument and the actual <input> event as the second argument in case you need it.

ReactVanilla

() => {
  const [selectedValues, setSelectedValues] = React.useState(['B', 'C'])
  return (
    <Buttonbar
      variant="multi-select"
      aria-label="Controlled multi-select Buttonbar"
      selectedValues={selectedValues}
      onSelectedValuesChange={(newSelectedValues, event) =>
        setSelectedValues(newSelectedValues)
      }
    >
      <ButtonbarButton value="A">
        <ButtonbarButtonLabel>Check 1</ButtonbarButtonLabel>
      </ButtonbarButton>
      <ButtonbarButton value="B">
        <ButtonbarButtonLabel>Check 2</ButtonbarButtonLabel>
      </ButtonbarButton>
      <ButtonbarButton value="C">
        <ButtonbarButtonLabel>Check 3</ButtonbarButtonLabel>
      </ButtonbarButton>
      <ButtonbarButton value="D" disabled>
        <ButtonbarButtonLabel>Check disabled</ButtonbarButtonLabel>
      </ButtonbarButton>
    </Buttonbar>
  )
}

() => {
  const [selectedValues, setSelectedValues] = React.useState(['B', 'C'])
  return (
    <Buttonbar
      variant="multi-select"
      aria-label="Controlled multi-select Buttonbar"
      selectedValues={selectedValues}
      onSelectedValuesChange={(newSelectedValues, event) =>
        setSelectedValues(newSelectedValues)
      }
    >
      <ButtonbarButton value="A">
        <ButtonbarButtonLabel>Check 1</ButtonbarButtonLabel>
      </ButtonbarButton>
      <ButtonbarButton value="B">
        <ButtonbarButtonLabel>Check 2</ButtonbarButtonLabel>
      </ButtonbarButton>
      <ButtonbarButton value="C">
        <ButtonbarButtonLabel>Check 3</ButtonbarButtonLabel>
      </ButtonbarButton>
      <ButtonbarButton value="D" disabled>
        <ButtonbarButtonLabel>Check disabled</ButtonbarButtonLabel>
      </ButtonbarButton>
    </Buttonbar>
  )
}

<div class="swan-buttonbar">
  <input
    type="checkbox"
    class="swan-checkbox"
    value="A"
    id="auto-id-vfbic16rp-226"
    name="auto-id-vfbic16rp-230"
  /><label for="auto-id-vfbic16rp-226">Check 1</label
  ><input
    type="checkbox"
    class="swan-checkbox"
    value="B"
    checked=""
    id="auto-id-vfbic16rp-227"
    name="auto-id-vfbic16rp-230"
  /><label for="auto-id-vfbic16rp-227">Check 2</label
  ><input
    type="checkbox"
    class="swan-checkbox"
    value="C"
    checked=""
    id="auto-id-vfbic16rp-228"
    name="auto-id-vfbic16rp-230"
  /><label for="auto-id-vfbic16rp-228">Check 3</label
  ><input
    type="checkbox"
    disabled=""
    class="swan-checkbox"
    value="D"
    id="auto-id-vfbic16rp-229"
    name="auto-id-vfbic16rp-230"
  /><label for="auto-id-vfbic16rp-229">Check disabled</label>
</div>

<div class="swan-buttonbar">
  <input
    type="checkbox"
    class="swan-checkbox"
    value="A"
    id="auto-id-vfbic16rp-226"
    name="auto-id-vfbic16rp-230"
  /><label for="auto-id-vfbic16rp-226">Check 1</label
  ><input
    type="checkbox"
    class="swan-checkbox"
    value="B"
    checked=""
    id="auto-id-vfbic16rp-227"
    name="auto-id-vfbic16rp-230"
  /><label for="auto-id-vfbic16rp-227">Check 2</label
  ><input
    type="checkbox"
    class="swan-checkbox"
    value="C"
    checked=""
    id="auto-id-vfbic16rp-228"
    name="auto-id-vfbic16rp-230"
  /><label for="auto-id-vfbic16rp-228">Check 3</label
  ><input
    type="checkbox"
    disabled=""
    class="swan-checkbox"
    value="D"
    id="auto-id-vfbic16rp-229"
    name="auto-id-vfbic16rp-230"
  /><label for="auto-id-vfbic16rp-229">Check disabled</label>
</div>

Use toolbar when you want to display a series of secondary Buttons.

ReactVanilla

<Buttonbar variant="toolbar" aria-label="Toolbar with Buttons">
  <Button value="1" skin="secondary">
    Button 1
  </Button>
  <Button value="2" skin="secondary">
    Button 2
  </Button>
  <Button value="3" skin="secondary">
    Button 3
  </Button>
  <Button value="4" skin="secondary" disabled>
    Button Disabled
  </Button>
</Buttonbar>

<Buttonbar variant="toolbar" aria-label="Toolbar with Buttons">
  <Button value="1" skin="secondary">
    Button 1
  </Button>
  <Button value="2" skin="secondary">
    Button 2
  </Button>
  <Button value="3" skin="secondary">
    Button 3
  </Button>
  <Button value="4" skin="secondary" disabled>
    Button Disabled
  </Button>
</Buttonbar>

<div class="swan-buttonbar">
  <button
    value="1"
    type="button"
    class="swan-button swan-button-skin-secondary"
  >
    Button 1</button
  ><button
    value="2"
    type="button"
    class="swan-button swan-button-skin-secondary"
  >
    Button 2</button
  ><button
    value="3"
    type="button"
    class="swan-button swan-button-skin-secondary"
  >
    Button 3</button
  ><button
    value="4"
    disabled=""
    type="button"
    class="swan-button swan-button-skin-secondary"
  >
    Button Disabled
  </button>
</div>

<div class="swan-buttonbar">
  <button
    value="1"
    type="button"
    class="swan-button swan-button-skin-secondary"
  >
    Button 1</button
  ><button
    value="2"
    type="button"
    class="swan-button swan-button-skin-secondary"
  >
    Button 2</button
  ><button
    value="3"
    type="button"
    class="swan-button swan-button-skin-secondary"
  >
    Button 3</button
  ><button
    value="4"
    disabled=""
    type="button"
    class="swan-button swan-button-skin-secondary"
  >
    Button Disabled
  </button>
</div>

Disabled

Use disabled on ButtonbarButton when its option is unavailable.

ReactVanilla

<Buttonbar
  variant="single-select"
  defaultSelectedValue="B"
  aria-label="Buttonbar with disabled option"
>
  <ButtonbarButton disabled value="A">
    <ButtonbarButtonLabel>Radio 1</ButtonbarButtonLabel>
  </ButtonbarButton>
  <ButtonbarButton value="B">
    <ButtonbarButtonLabel>Radio 2</ButtonbarButtonLabel>
  </ButtonbarButton>
</Buttonbar>

<Buttonbar
  variant="single-select"
  defaultSelectedValue="B"
  aria-label="Buttonbar with disabled option"
>
  <ButtonbarButton disabled value="A">
    <ButtonbarButtonLabel>Radio 1</ButtonbarButtonLabel>
  </ButtonbarButton>
  <ButtonbarButton value="B">
    <ButtonbarButtonLabel>Radio 2</ButtonbarButtonLabel>
  </ButtonbarButton>
</Buttonbar>

<div class="swan-buttonbar">
  <input
    type="radio"
    class="swan-radio"
    value="A"
    id="auto-id-vfbic16rp-208"
    name="auto-id-vfbic16rp-210"
  /><label for="auto-id-vfbic16rp-208">Radio 1</label
  ><input
    type="radio"
    class="swan-radio"
    value="B"
    checked=""
    id="auto-id-vfbic16rp-209"
    name="auto-id-vfbic16rp-210"
  /><label for="auto-id-vfbic16rp-209">Radio 2</label>
</div>

<div class="swan-buttonbar">
  <input
    type="radio"
    class="swan-radio"
    value="A"
    id="auto-id-vfbic16rp-208"
    name="auto-id-vfbic16rp-210"
  /><label for="auto-id-vfbic16rp-208">Radio 1</label
  ><input
    type="radio"
    class="swan-radio"
    value="B"
    checked=""
    id="auto-id-vfbic16rp-209"
    name="auto-id-vfbic16rp-210"
  /><label for="auto-id-vfbic16rp-209">Radio 2</label>
</div>

Implementation

A <fieldset> tag cannot be used because styling of that tag is not supported enough in Chrome.

Accessibility

Include an aria-label whose value is a localized description of what the buttonbar is or does, e.g. "Change view".
If the Buttonbar controls another section of the page, include an aria-controls attribute whose value is the id of the section it controls.

Props

Buttonbar

See core props for additional props that can be applied to this component.

prop	type	required	default
`aria-controls` Identifies the element (or elements) whose contents or presence are controlled by the current element. If the Buttonbar controls another section of the page, include an aria-controls attribute whose value is the id of the section it controls. @see aria-owns.	`string`	false	null
`aria-label` Defines a string value that labels the current element. Provides a localized accessible label which describes what the buttonbar's purpose is. e.g. "Switch between the front and back of the business card" @see aria-labelledby.	`string`	false	null
`variant` - `single-select` means using radio buttons, which are mutually exclusive - `multi-select` means using checkbox options, of which many can be selected at once - `toolbar` means using regular buttons	`"toolbar""single-select""multi-select"null`	false	single-select
`width` The width of the buttonbar	`"standard""full-width"null`	false	standard
`name` Name for the input element(ButtonbarButton)	`stringnull`	false	null
`selectedValue` 'value' of currently selected button. Used when controlling the state of the component	`ButtonbarSelectedValue`	false	null
`defaultSelectedValue` The default selected value of the buttonbar. Used when not controlling the state of the component	`ButtonbarSelectedValue`	false	null
`onSelectedValueChange` Callback fired when selected option is changed. `event` is the input's onChange event	`((value: ButtonbarSelectedValue, event: ChangeEvent<HTMLInputElement, Element>) => void)null`	false	null
`selectedValues` List of 'values' of currently selected buttons.	`ButtonbarSelectedValuesnull`	false	null
`defaultSelectedValues` By default selected buttons.	`ButtonbarSelectedValuesnull`	false	null
`onSelectedValuesChange` Callback fired when one of the selections' value changes. It is passed the updated list of `selectedValues` and the actual `<input>` event in case you need it.	`((selectedValues: ButtonbarSelectedValues, event: ChangeEvent<HTMLInputElement, Element>) => void)null`	false	null

ButtonbarButton

See core props for additional props that can be applied to this component.

prop	type	required	default
`value` The value of the button	`string`	true	null

Buttonbar

Use Buttonbar...

Don't use Buttonbar...

Width

Single-select

Multi-select

Toolbar

Disabled

Implementation

Accessibility

Props

Related