Skip to main content
⚠️ AppKit is in an early development phase and is subject to change without notice. DO NOT use in production environments.

# ToggleGroup

Group of toggle buttons for selecting one or more options

## Example​

    import { Bold, Italic, Underline } from "lucide-react"

    import {
      ToggleGroup,
      ToggleGroupItem,
    } from "@databricks/appkit-ui/react"

    export default function ToggleGroupExample() {
      return (
        <ToggleGroup type="multiple">
          <ToggleGroupItem value="bold" aria-label="Toggle bold">
            <Bold className="h-4 w-4" />
          </ToggleGroupItem>
          <ToggleGroupItem value="italic" aria-label="Toggle italic">
            <Italic className="h-4 w-4" />
          </ToggleGroupItem>
          <ToggleGroupItem value="underline" aria-label="Toggle underline">
            <Underline className="h-4 w-4" />
          </ToggleGroupItem>
        </ToggleGroup>
      )
    }

## ToggleGroup​

Group of toggle buttons for selecting one or more options

Source: `packages/appkit-ui/src/react/ui/toggle-group.tsx`

### Props​

Prop | Type | Required | Default | Description
--- | --- | --- | --- | ---
`type` | `enum` | ✓ | - | -
`value` | `string | string[]` |  | - | The controlled stateful value of the item that is pressed. The controlled stateful value of the items that are pressed.
`defaultValue` | `string | string[]` |  | - | The value of the item that is pressed when initially rendered. Use `defaultValue` if you do not need to control the state of a toggle group. The value of the items that are pressed when initially rendered. Use `defaultValue` if you do not need to control the state of a toggle group.
`onValueChange` | `((value: string) => void) | ((value: string[]) => void)` |  | - | The callback that fires when the value of the toggle group changes. The callback that fires when the state of the toggle group changes.
`disabled` | `boolean` |  | - | Whether the group is disabled from user interaction. @defaultValue false
`rovingFocus` | `boolean` |  | - | Whether the group should maintain roving focus of its buttons. @defaultValue true
`loop` | `boolean` |  | - | -
`orientation` | `enum` |  | - | -
`dir` | `enum` |  | - | -
`asChild` | `boolean` |  | - | -
`variant` | `"default" | "outline" | null` |  | - | -
`size` | `"default" | "sm" | "lg" | null` |  | - | -
`spacing` | `number` |  | `0` | -

### Usage​

    import { ToggleGroup } from '@databricks/appkit-ui';

    <ToggleGroup /* props */ />

## ToggleGroupItem​

Source: `packages/appkit-ui/src/react/ui/toggle-group.tsx`

### Props​

Prop | Type | Required | Default | Description
--- | --- | --- | --- | ---
`asChild` | `boolean` |  | - | -
`value` | `string | string[]` |  | - | The controlled stateful value of the item that is pressed. The controlled stateful value of the items that are pressed.
`variant` | `"default" | "outline" | null` |  | - | -
`size` | `"default" | "sm" | "lg" | null` |  | - | -

### Usage​

    import { ToggleGroupItem } from '@databricks/appkit-ui';

    <ToggleGroupItem /* props */ />