Toggle

A button that stays pressed. Uses aria-pressed rather than a checkbox, because this is a control that changes state, not a value submitted with a form.

src/components/ui/toggle.tsx

About

From the component's own source, where it was written.

A button that stays pressed.

aria-pressed rather than a checkbox: this is a control that changes state, not a value submitted with a form. ToggleGroup adds single or multiple selection on top without changing the item.

Install

npx astralyx-ui add toggle

Usage

import { Toggle, ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle'

<Toggle aria-label="Bold"><Bold /></Toggle>

<ToggleGroup type="multiple" defaultValue={['bold']}>
  <ToggleGroupItem value="bold" aria-label="Bold"><Bold /></ToggleGroupItem>
</ToggleGroup>

Composer

Change the props and the source below follows.

Props

variant

size

group type

tsx

<ToggleGroup type="multiple" variant="outline" size="icon" defaultValue={['bold']}>
  <ToggleGroupItem value="bold" aria-label="Bold"><Bold /></ToggleGroupItem>
  <ToggleGroupItem value="italic" aria-label="Italic"><Italic /></ToggleGroupItem>
</ToggleGroup>

Examples

Standalone

tsx

<Toggle aria-label="Bold"><Bold /></Toggle>

Group

tsx

<ToggleGroup type="multiple">…</ToggleGroup>

API

Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.

`Toggle`

Extends Omit<ComponentProps<'button'>, 'value'>.

Prop	Type	Default	Description
variant	'default' \| 'outline'	—	—
size	'sm' \| 'default' \| 'lg' \| 'icon-sm' \| 'icon' \| 'icon-lg'	—	—
pressed	boolean	—	Controlled and uncontrolled state, on Toggle.
defaultPressed	boolean	false	Controlled and uncontrolled state, on Toggle.
onPressedChange	(pressed: boolean) => void	—	Fires with the new state.

`ToggleGroup`

Extends Omit<ComponentProps<'div'>, 'defaultValue' | 'onChange'>.

Prop	Type	Default	Description
children	ReactNode	required	—
type	'single' \| 'multiple'	'single'	Whether one item or many can be pressed at once.
value	string[]	—	An array in both modes, so switching type needs no change.
defaultValue	string[]	[]	—
onValueChange	(value: string[]) => void	—	—
variant	ToggleProps['variant']	—	—
size	ToggleProps['size']	—	—

`ToggleGroupItem`

Extends Omit<ToggleProps, 'pressed' | 'onPressedChange'>.

Prop	Type	Default	Description
variant	'default' \| 'outline'	—	—
size	'sm' \| 'default' \| 'lg' \| 'icon-sm' \| 'icon' \| 'icon-lg'	—	—
defaultPressed	boolean	—	Controlled and uncontrolled state, on Toggle.
value	string	required	—

Functions

Function	Signature	Description
toggleVariants	(props?: { variant?: 'default' \| 'outline'; size?: 'sm' \| 'default' \| 'lg' \| 'icon-sm' \| 'icon' \| 'icon-lg' }) => string	A button that stays pressed.