Toggle

A two-state button that can be either on or off.

Installation


pnpm dlx bna-ui add toggle

import {
  Toggle,
  ToggleGroup,
  ToggleGroupSingle,
  ToggleGroupMultiple,
} from '@/components/ui/toggle';

<Toggle pressed={pressed} onPressedChange={setPressed}>
  <Bold size={16} />
</Toggle>

A two-state button that can be either on (pressed) or off.

Prop	Type	Default	Description
`children`	`ReactNode`	-	The content to display inside the toggle.
`pressed`	`boolean`	`false`	Whether the toggle is pressed (on).
`onPressedChange`	`(pressed: boolean) => void`	-	Callback fired when the pressed state changes.
`variant`	`'default' \| 'outline'`	`'default'`	The visual variant of the toggle.
`size`	`'default' \| 'icon'`	`'icon'`	The size of the toggle.
`disabled`	`boolean`	`false`	Whether the toggle is disabled.
`style`	`ViewStyle`	-	Additional styles to apply to the toggle container.
`textStyle`	`TextStyle`	-	Additional styles to apply to the toggle text.

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

Prop	Type	Default	Description
`type`	`'single' \| 'multiple'`	`'single'`	Whether to allow single or multiple selection.
`value`	`string \| string[]`	-	The controlled value(s) of the toggle group.
`onValueChange`	`(value: string \| string[]) => void`	-	Callback fired when the value changes.
`items`	`ToggleGroupItem[]`	-	Array of toggle items to render.
`variant`	`'default' \| 'outline'`	`'default'`	The visual variant of the toggles.
`size`	`'default' \| 'icon'`	`'default'`	The size of the toggles.
`disabled`	`boolean`	`false`	Whether the entire group is disabled.
`style`	`ViewStyle`	-	Additional styles to apply to the group container.
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`	The orientation of the toggle group.

Configuration for individual items in a toggle group.

Prop	Type	Default	Description
`value`	`string`	-	The unique value for this toggle item.
`label`	`string`	-	The text label for this toggle item.
`icon`	`React.ComponentType<LucideProps>`	-	Optional icon component to display.
`disabled`	`boolean`	`false`	Whether this specific item is disabled.

Convenience component for single-selection toggle groups.

Prop	Type	Default	Description
`value`	`string`	-	The controlled value of the selected toggle.
`onValueChange`	`(value: string) => void`	-	Callback fired when the selected value changes.
`...props`	`Omit<ToggleGroupProps, ...>`	-	All other ToggleGroup props except type and callbacks.

Convenience component for multiple-selection toggle groups.

Prop	Type	Default	Description
`value`	`string[]`	-	The controlled array of selected toggle values.
`onValueChange`	`(value: string[]) => void`	-	Callback fired when the selected values change.
`...props`	`Omit<ToggleGroupProps, ...>`	-	All other ToggleGroup props except type and callbacks.

The Toggle components are built with accessibility in mind:

On This Page