DXC Logo
Halstack Design System
v16.1.0

Overview

Guidelines

Foundations

Migration

Utilities

Components

Toggle group

The toggle group component is a set of toggle buttons that function as a unified control, allowing users to make either single or multiple selections. It is ideal for grouping related actions or options within a compact and interactive interface.

Overview
Code

Props

NameTypeDescriptionDefault
defaultValuenumber | number[]The key(s) of the initially selected value(s), only when it is uncontrolled.-
margin'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | MarginSize 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.-
multiplebooleanIf 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[]) => voidThis 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-
Required
options
Option[]

being Option an object with the following properties:

{ disabled?: boolean; icon?: string | (React.ReactNode & React.SVGProps<SVGSVGElement>); label?: string; value: string; }
An array of objects representing the selectable options.-
New
orientation
'horizontal' | 'vertical'The orientation of the toggle group.'horizontal'
tabIndexnumberValue of the tabindex attribute.0
valuenumber | 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.-

Examples

Controlled

() => {
  const [value, changeValue] = useState(1);
  const onChange = (newValue) => {
    changeValue(newValue);
  };
  const options = [
    {
      value: 1,
      label: "Web",
    },
    {
      value: 2,
      label: "Android",
    },
    {
      value: 3,
      label: "iOS",
    },
  ];

  return (
    <DxcInset space="var(--spacing-padding-xl)">
      <DxcToggleGroup
        onChange={onChange}
        options={options}
        value={value}
      />
    </DxcInset>
  );
}

Uncontrolled

() => {
  const refText = useRef(null);

  const onChange = (selectedValue) => {
    if (refText.current) {
      refText.current.style.fontWeight = "normal";
      refText.current.style.fontStyle = "normal";
      refText.current.style.textDecoration = "none";
      refText.current.style.textAlign = "left";
      selectedValue.forEach((textOption) => {
        switch (textOption) {
          case 1:
            refText.current.style.fontWeight = "bold";
            break;
          case 2:
            refText.current.style.fontStyle = "italic";
            break;
          case 3:
            refText.current.style.textDecoration = "underline";
            break;
          case 4:
            refText.current.style.textAlign = "left";
            break;
          case 5:
            refText.current.style.textAlign = "center";
            break;
          case 6:
            refText.current.style.textAlign = "right";
            break;
          default:
            break;
        }
      });
    }
  }

  const options = [
    {
      value: 1,
      icon: "format_bold",
      title: "Bold",
    },
    {
      value: 2,
      icon: "format_italic",
      title: "Italic",
    },
    {
      value: 3,
      icon: "format_underlined",
      title: "Underlined",
    },
    {
      value: 4,
      icon: "format_align_left",
      title: "Align left",
    },
    {
      value: 5,
      icon: "format_align_center",
      title: "Align center",
    },
    {
      value: 6,
      icon: "format_align_right",
      title: "Align right",
    },
  ];

  return (
    <DxcInset space="var(--spacing-padding-xl)">
      <DxcFlex gap="var(--spacing-gap-xxl)">
        <DxcToggleGroup
          multiple
          onChange={onChange}
          options={options}
          orientation="vertical"
        />
        <DxcContainer 
          width="100%" 
          background={{ color: "var(--border-color-neutral-brighter)" }}
          border={{ 
            color: "var(--border-color-neutral-strong)",
            style: "var(--border-style-default)",
            width: "var(--border-width-s)"
          }}
          borderRadius="var(--border-radius-m)"
          padding="var(--spacing-padding-m)"
        >
          <p ref={refText} style={{ margin: 0 }}>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
          </p>
        </DxcContainer>
      </DxcFlex>
    </DxcInset>
  );
}
On this page