Tabler React 2 Docs

Select Group

Select Groups are used to mask radio and checkbox inputs in boxes with a label.

Signature

import { SelectGroup } from "tabler-react-2";

<SelectGroup {...props} />;

Props

Prop	Required	Type	Description
`items`	Yes	Array of objects	The items to be shown in the select group. Each item should have a `value` and `label` prop.
`value`	Yes	Object or Array of Objects if multiple	The value of the select group. If the value is an array, multiple items can be selected. The value of each item should be the same as the `value` prop of the item.
`onChange`	Yes	Function	The function to be called when the value of the select group changes. It is called with the new value as the argument, not the event. If the value is an array, the new value is an array of objects. The value of each item should be the same as the `value` prop of the item.
`multiple`	No	Boolean	Whether multiple items can be selected.

Basic Usage

The SelectGroup component is used to mask radio and checkbox inputs in boxes with a label.

<SelectGroup
  items={[
    { value: "one", label: "One" },
    { value: "two", label: "Two" },
    { value: "three", label: "Three" },
  ]}
  value={null}
  onChange={console.log}
/>

Multiple Select

The multiple prop can be used to allow multiple items to be selected.

<SelectGroup
  items={[
    { value: "one", label: "One" },
    { value: "two", label: "Two" },
    { value: "three", label: "Three" },
  ]}
  value={null}
  onChange={console.log}
  multiple
/>

Edit this page on GitHub

Tabler React 2 Docs

Select Group

Select Group

Signature

Props

Basic Usage

Multiple Select

Dropdown Input

Enclosed Select Group

On this page