SingleSelectionButtons

Single selection buttons are used similar to Radio Buttons to select a single option

() => {
  const [data, setData] = React.useState('a');

  return (
    <SingleSelectionButtons value={data} onChange={console.log}>
      <SelectionButton value="a">a</SelectionButton>
      <SelectionButton value="b">b</SelectionButton>
    </SingleSelectionButtons>
  );
};

Props

Prop	Type	Default	Description
value	string \| number		Control the selected item by manually setting the value
onChange	(string \| number) => void		A function triggered when an item is selected/changed. The single parameter it accepts contains the value of the selected item
disabled	boolean	false	Control if the button is in a disabled or enabled state

Examples

Basic

<SingleSelectionButtons value="id1" onChange={console.log}>
  <SelectionButton value="id1">Test 1</SelectionButton>
  <SelectionButton value="id2" disabled>
    Test 2
  </SelectionButton>
  <SelectionButton value="id3">Test 3</SelectionButton>
  <SelectionButton value="id4">Test 4</SelectionButton>
</SingleSelectionButtons>