Function ButtonGroup

Parameters

• props:
      | {
          ariaLabel?: string;
          disabled?: boolean;
          options: readonly ButtonGroupOptionType<ValueType>[];
          stretchItems?: boolean;
      } & {
          type: "single";
          value?: ValueType;
          onValueChange(value: ValueType): void;
      }
      | {
          ariaLabel?: string;
          disabled?: boolean;
          options: readonly ButtonGroupOptionType<ValueType>[];
          stretchItems?: boolean;
      } & {
          type: "multiple";
          value?: ValueType[];
          onValueChange(value: ValueType[]): void;
      }
  • {
        ariaLabel?: string;
        disabled?: boolean;
        options: readonly ButtonGroupOptionType<ValueType>[];
        stretchItems?: boolean;
    } & {
        type: "single";
        value?: ValueType;
        onValueChange(value: ValueType): void;
    }

    • OptionalariaLabel?: string

      Provide an accessible name for the group as a whole. Button groups rarely have a visible caption, so setting this is recommended — it tells screen reader users what the buttons collectively control.

      Example

      `Text alignment`
      Copy

    • Optionaldisabled?: boolean

      When true, prevents the user from interacting with the button group and all its items.

      Default

      false
      Copy

    • options: readonly ButtonGroupOptionType<ValueType>[]

      Buttons to render in the group. Each item must have a unique value.

    • OptionalstretchItems?: boolean

      Stretch the group to fill available space and make items within equal-width.

      Default

      false
      Copy

    • type: "single"

    • Optionalvalue?: ValueType

      The controlled value of the active button. Should be used in conjunction with onValueChange.

    • onValueChange: function

      • onValueChange(value: ValueType): void

        Called when the user activates a button.

        Parameters

        • value: ValueType

        Returns void

  • {
        ariaLabel?: string;
        disabled?: boolean;
        options: readonly ButtonGroupOptionType<ValueType>[];
        stretchItems?: boolean;
    } & {
        type: "multiple";
        value?: ValueType[];
        onValueChange(value: ValueType[]): void;
    }

    • OptionalariaLabel?: string

      Provide an accessible name for the group as a whole. Button groups rarely have a visible caption, so setting this is recommended — it tells screen reader users what the buttons collectively control.

      Example

      `Text alignment`
      Copy

    • Optionaldisabled?: boolean

      When true, prevents the user from interacting with the button group and all its items.

      Default

      false
      Copy

    • options: readonly ButtonGroupOptionType<ValueType>[]

      Buttons to render in the group. Each item must have a unique value.

    • OptionalstretchItems?: boolean

      Stretch the group to fill available space and make items within equal-width.

      Default

      false
      Copy

    • type: "multiple"

    • Optionalvalue?: ValueType[]

      The controlled values of the active buttons. Should be used in conjunction with onValueChange.

    • onValueChange: function

      • onValueChange(value: ValueType[]): void

        Called when the user toggles a button.

        Parameters

        • value: ValueType[]

        Returns void