ToggleGroup

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

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 */ />