Toggle Group

Ready

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.

Code

Usage

Specifications

Props

Name	Default	Description
label: string		Text to be placed above the component.
helperText: string		Helper text to be placed above the component.
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.
onChange: function		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
disabled: boolean	`false`	If true, the component will be disabled.
multiple: boolean	`false`	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.
options: object[]		An array of objects representing the selectable options. Each object has the following properties: value: Number with the option inner value. label: String with the option display value. icon: Element or path used as the icon of an option.
margin: string \| object		Size of the margin to be applied to the component ('xxsmall' \| 'xsmall' \| 'small' \| 'medium' \| 'large' \| 'xlarge' \| 'xxlarge'). You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
tabIndex: number	`0`	Value of the tabindex.

Examples

Controlled

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

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

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

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

Uncontrolled

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

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

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

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

Icons

() => {
  const icon = (
    <svg viewBox="0 0 24 24" fill="currentColor">
    <path d="M0 0h24v24H0z" fill="none" />
    <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" />
  </svg>
  );
  const options = [
    {
      value: 1,
      label: "Facebook",
      icon: icon,
    },
    {
      value: 2,
      label: "Twitter",
      icon: icon
    },
    {
      value: 3,
      label: "Linkedin",
      icon: icon
    },
  ];

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

() => {
  const icon = (
    <svg viewBox="0 0 24 24" fill="currentColor">
    <path d="M0 0h24v24H0z" fill="none" />
    <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" />
  </svg>
  );
  const options = [
    {
      value: 1,
      label: "Facebook",
      icon: icon,
    },
    {
      value: 2,
      label: "Twitter",
      icon: icon
    },
    {
      value: 3,
      label: "Linkedin",
      icon: icon
    },
  ];

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

Edit this page on GitHub

Textarea

NextTypography

Toggle Group

Props

Examples

Controlled

Uncontrolled

Icons

Contents