Toggle Group - rafty/ui Docs

A set of two-state buttons that can be toggled on or off.

This component is made on top of Radix UIs Toggle Group Component with our styling conventions. This component has been shared with you, ensuring that all its native properties are accessible. If you need to apply your own styling you can use the isBarebone (to remove styling from entire component and its subcomponents) or isUnstyled (to remove styling from a particular subcomponent).

Anatomy

Import all parts and piece them together.

import { ToggleGroup, ToggleGroupItem } from "@rafty/ui";

<ToggleGroup>
  <ToggleGroupItem />
</ToggleGroup>;

Usage

<ToggleGroup type="single">
  <ToggleGroupItem value="1">
    1
  </ToggleGroupItem>
  <ToggleGroupItem value="2">
    2
  </ToggleGroupItem>
  <ToggleGroupItem value="3">
    3
  </ToggleGroupItem>
</ToggleGroup>

Size

There are 3 size options in spinner: sm, md (default) & lg.

<ToggleGroup
  defaultValue="1"
  size="sm"
  type="single"
>
  <ToggleGroupItem value="1">
    1
  </ToggleGroupItem>
  <ToggleGroupItem value="2">
    2
  </ToggleGroupItem>
  <ToggleGroupItem value="3">
    3
  </ToggleGroupItem>
</ToggleGroup>

Type

Using the type prop you can set the type of toggle-group. Values can be single, multiple;

<ToggleGroup
  defaultValue={[
    '1'
  ]}
  type="multiple"
>
  <ToggleGroupItem value="1">
    1
  </ToggleGroupItem>
  <ToggleGroupItem value="2">
    2
  </ToggleGroupItem>
  <ToggleGroupItem value="3">
    3
  </ToggleGroupItem>
</ToggleGroup>

Default Value

<ToggleGroup
  defaultValue="3"
  type="single"
>
  <ToggleGroupItem value="1">
    1
  </ToggleGroupItem>
  <ToggleGroupItem value="2">
    2
  </ToggleGroupItem>
  <ToggleGroupItem value="3">
    3
  </ToggleGroupItem>
</ToggleGroup>

Using the defaultValue prop you can set the default value of toggle-group.

Barebone

<ToggleGroup
  className="flex h-9 w-full"
  defaultValue="1"
  isBarebone
  type="single"
>
  <ToggleGroupItem
    className="dark:border-secondary-800 data-[state=on]:bg-primary-100   data-[state=on]:text-primary-500 dark:data-[state=on]:text-primary-300  dark:data-[state=on]:bg-primary-300/20 w-full rounded-l-md border font-bold "
    value="1"
  >
    1
  </ToggleGroupItem>
  <ToggleGroupItem
    className="dark:border-secondary-800 data-[state=on]:bg-primary-100   data-[state=on]:text-primary-500  dark:data-[state=on]:text-primary-300 dark:data-[state=on]:bg-primary-300/20 w-full border font-bold"
    value="2"
  >
    2
  </ToggleGroupItem>
  <ToggleGroupItem
    className="dark:border-secondary-800 data-[state=on]:bg-primary-100 data-[state=on]:text-primary-500  dark:data-[state=on]:text-primary-300  dark:data-[state=on]:bg-primary-300/20 w-full rounded-r-md border font-bold"
    value="3"
  >
    3
  </ToggleGroupItem>
</ToggleGroup>

Pass isBarebone prop to remove all style in toggle-group and its sub components.

UnStyled

<ToggleGroup
  defaultValue="1"
  type="single"
>
  <ToggleGroupItem
    className="data-[state=on]:bg-primary-300/20 data-[state=on]:text-primary-500 dark:data-[state=on]:text-primary-300 w-full px-3 py-1  font-semibold"
    isUnstyled
    value="1"
  >
    1
  </ToggleGroupItem>
  <ToggleGroupItem value="2">
    2
  </ToggleGroupItem>
  <ToggleGroupItem value="3">
    3
  </ToggleGroupItem>
</ToggleGroup>

Pass isUnstyled prop to remove style from a particular sub component.

API

Root

Property	Description	Type	Default
isBarebone	Removes style from whole component	boolean	false

Item

Property	Description	Type	Default
isUnstyled	Removes style from component	`boolean`	`false`