Toggle Group

Toggle buttons can be used to put together related options that share a common attribute modification. It allows the user to switch from one selected option to another in the same control, having one option selected at a time. Also, there can be another variation that allows selecting multiple options from the current toggle group.

Props

Name	Type	Description	Default
defaultValue	`number \| number[]`	The key(s) of the initially selected value(s), only when it is uncontrolled.	-
value	`number \| number[]`	The key(s) of the selected value(s). If the toggle group component doesn't allow multiple selection, it must be one unique value. If the component allows multiple selection, value must be an array. If undefined, the component will be uncontrolled and the value will be managed internally by the component.	-
label	`string`	Text to be placed above the component.	-
helperText	`string`	Helper text to be placed above the component.	-
Required options	`{ label?: string; icon: string \| (React.ReactNode & React.SVGProps <SVGSVGElement>); value: string; title?: string; }[]`	An array of objects representing the selectable options. Each object has the following properties: label: String with the option display value. icon: Material Symbol name or SVG element used as the icon of an option. value: Number with the option inner value. title: Text representing advisory information related to an option. Under the hood, it also serves as an accessible label for the icon.	-
disabled	`boolean`	If true, the component will be disabled.	`false`
multiple	`boolean`	If true, the toggle group will support multiple selection. In that case, value must be an array of numbers with the keys of the selected values.	`false`
onChange	`(optionIndex: number \| number[]) => void`	This function will be called every time the selection changes. The number with the key of the selected value will be passed as a parameter to this function. If multiple selection is allowed, an array of keys will be passed	-
margin	`'xxsmall' \| 'xsmall' \| 'small' \| 'medium' \| 'large' \| 'xlarge' \| 'xxlarge' \| Margin`	Size of the margin to be applied to the component. You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.	-
tabIndex	`number`	Value of the `tabindex` attribute.	`0`

Examples

Controlled

() => {
  const [value, changeValue] = useState(1);
  const onChange = (newValue) => {
    changeValue(newValue);
  };
  const options = [
    {
      value: 1,
      label: "Facebook",
    },
    {
      value: 2,
      label: "X",
    },
    {
      value: 3,
      label: "Linkedin",
    },
  ];

  return (
    <DxcInset space="2rem">
      <DxcToggleGroup
        label="Choose a social network"
        options={options}
        onChange={onChange}
        value={value}
      />
    </DxcInset>
  );
}

() => {
  const [value, changeValue] = useState(1);
  const onChange = (newValue) => {
    changeValue(newValue);
  };
  const options = [
    {
      value: 1,
      label: "Facebook",
    },
    {
      value: 2,
      label: "X",
    },
    {
      value: 3,
      label: "Linkedin",
    },
  ];

  return (
    <DxcInset space="2rem">
      <DxcToggleGroup
        label="Choose a social network"
        options={options}
        onChange={onChange}
        value={value}
      />
    </DxcInset>
  );
}

Uncontrolled

() => {
  const onChange = (newValue) => {
    console.log(newValue);
  };
  const options = [
    {
      value: 1,
      label: "Facebook",
      icon: "filled_thumb_up"
    },
    {
      value: 2,
      label: "X",
      icon: "filled_raven"
    },
    {
      value: 3,
      label: "Linkedin",
      icon: "filled_work"
    },
  ];

  return (
    <DxcInset space="2rem">
      <DxcToggleGroup
        label="Choose a social network"
        defaultValue={2}
        options={options}
        onChange={onChange}
      />
    </DxcInset>
  );
}

() => {
  const onChange = (newValue) => {
    console.log(newValue);
  };
  const options = [
    {
      value: 1,
      label: "Facebook",
      icon: "filled_thumb_up"
    },
    {
      value: 2,
      label: "X",
      icon: "filled_raven"
    },
    {
      value: 3,
      label: "Linkedin",
      icon: "filled_work"
    },
  ];

  return (
    <DxcInset space="2rem">
      <DxcToggleGroup
        label="Choose a social network"
        defaultValue={2}
        options={options}
        onChange={onChange}
      />
    </DxcInset>
  );
}

Props
Examples
- Controlled
- Uncontrolled

Edit this page on GitHub

Report an issue on GitHub

Textarea

NextTypography

Toggle Group

Props

Examples

Controlled

Uncontrolled

Contents