ToggleGroup

A row of toggles with single or multiple selection.

ToggleGroupProps packages/core/src/form-controls.ts:310 ↗

Import

import { ToggleGroup } from "@tarve/core";

Usage

ToggleGroup.tsx

import { ToggleGroup } from "@tarve/core";

let alignment: string | string[] = "left";

<ToggleGroup
  type="single"
  value={alignment}
  items={[
    { value: "left", label: "Left" },
    { value: "center", label: "Center" },
    { value: "right", label: "Right" },
  ]}
  onValueChange={(value) => {
    alignment = value;
  }}
/>

Props

Prop	Type	Default
`items` required	`readonly ToggleGroupItem[]`	—
`value` required	`string \| string[]`	—
`disabled`	`boolean`	—
`onValueChange`	`(value: string \| string[]) => void`	—
`type`	`"single" \| "multiple"`	`"single"`

Common props

Shared by every component. See descriptions →

childrenhighlightidkeymotionFromonHighlightonPasteonTransitionEndrovingGroupstyle

Types

ToggleGroupItem

interface ToggleGroupItem {
  value: string;
  label: string;
  content?: Child;
  disabled?: boolean;
}