Toggle

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

import { Toggle } from '@/components/ui/toggle';
import { Bold } from 'lucide-react-native';
import React, { useState } from 'react';

export function ToggleDemo() {
  const [pressed, setPressed] = useState(false);

  return (
    <Toggle pressed={pressed} onPressedChange={setPressed}>
      <Bold size={16} />
    </Toggle>
  );
}

Installation


pnpm dlx bna-ui add toggle

Usage

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

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

Examples

Default

import { Toggle } from '@/components/ui/toggle';
import { Bold } from 'lucide-react-native';
import React, { useState } from 'react';

export function ToggleDemo() {
  const [pressed, setPressed] = useState(false);

  return (
    <Toggle pressed={pressed} onPressedChange={setPressed}>
      <Bold size={16} />
    </Toggle>
  );
}

Variants

import { Toggle } from '@/components/ui/toggle';
import { View } from '@/components/ui/view';
import { Bold, Italic } from 'lucide-react-native';
import React, { useState } from 'react';

export function ToggleVariants() {
  const [pressed1, setPressed1] = useState(false);
  const [pressed2, setPressed2] = useState(true);
  const [pressed3, setPressed3] = useState(false);
  const [pressed4, setPressed4] = useState(true);

  return (
    <View style={{ flexDirection: 'row', gap: 12, alignItems: 'center' }}>
      <Toggle
        pressed={pressed1}
        onPressedChange={setPressed1}
        variant='default'
      >
        <Bold size={16} />
      </Toggle>
      <Toggle
        pressed={pressed2}
        onPressedChange={setPressed2}
        variant='default'
      >
        <Italic size={16} />
      </Toggle>
      <Toggle
        pressed={pressed3}
        onPressedChange={setPressed3}
        variant='outline'
      >
        <Bold size={16} />
      </Toggle>
      <Toggle
        pressed={pressed4}
        onPressedChange={setPressed4}
        variant='outline'
      >
        <Italic size={16} />
      </Toggle>
    </View>
  );
}

Sizes

import { Toggle } from '@/components/ui/toggle';
import { View } from '@/components/ui/view';
import { Bold } from 'lucide-react-native';
import React, { useState } from 'react';

export function ToggleSizes() {
  const [pressed1, setPressed1] = useState(false);
  const [pressed2, setPressed2] = useState(true);

  return (
    <View style={{ flexDirection: 'row', gap: 12, alignItems: 'center' }}>
      <Toggle pressed={pressed1} onPressedChange={setPressed1} size='icon'>
        <Bold size={16} />
      </Toggle>
      <Toggle pressed={pressed2} onPressedChange={setPressed2} size='default'>
        Bold
      </Toggle>
    </View>
  );
}

With Text

import { Toggle } from '@/components/ui/toggle';
import { View } from '@/components/ui/view';
import React, { useState } from 'react';

export function ToggleText() {
  const [pressed1, setPressed1] = useState(false);
  const [pressed2, setPressed2] = useState(true);
  const [pressed3, setPressed3] = useState(false);

  return (
    <View style={{ flexDirection: 'row', gap: 12, alignItems: 'center' }}>
      <Toggle pressed={pressed1} onPressedChange={setPressed1} size='default'>
        Bold
      </Toggle>
      <Toggle
        pressed={pressed2}
        onPressedChange={setPressed2}
        size='default'
        variant='outline'
      >
        Italic
      </Toggle>
      <Toggle pressed={pressed3} onPressedChange={setPressed3} size='default'>
        Underline
      </Toggle>
    </View>
  );
}

Disabled

import { Toggle } from '@/components/ui/toggle';
import { View } from '@/components/ui/view';
import { Bold, Italic } from 'lucide-react-native';
import React from 'react';

export function ToggleDisabled() {
  return (
    <View style={{ flexDirection: 'row', gap: 12, alignItems: 'center' }}>
      <Toggle pressed={false} disabled>
        <Bold size={16} />
      </Toggle>
      <Toggle pressed={true} disabled>
        <Italic size={16} />
      </Toggle>
      <Toggle pressed={false} disabled variant='outline'>
        <Bold size={16} />
      </Toggle>
      <Toggle pressed={true} disabled variant='outline'>
        <Italic size={16} />
      </Toggle>
    </View>
  );
}

Toggle Group Single

import { ToggleGroupSingle } from '@/components/ui/toggle';
import { AlignCenter, AlignLeft, AlignRight } from 'lucide-react-native';
import React, { useState } from 'react';

export function ToggleGroupSingleDemo() {
  const [value, setValue] = useState('left');

  const items = [
    { value: 'left', label: 'Left', icon: AlignLeft },
    { value: 'center', label: 'Center', icon: AlignCenter },
    { value: 'right', label: 'Right', icon: AlignRight },
  ];

  return (
    <ToggleGroupSingle
      value={value}
      onValueChange={setValue}
      items={items}
      size='icon'
    />
  );
}

Toggle Group Multiple

import { ToggleGroupMultiple } from '@/components/ui/toggle';
import { Bold, Italic, Underline } from 'lucide-react-native';
import React, { useState } from 'react';

export function ToggleGroupMultipleDemo() {
  const [value, setValue] = useState(['bold']);

  const items = [
    { value: 'bold', label: 'Bold', icon: Bold },
    { value: 'italic', label: 'Italic', icon: Italic },
    { value: 'underline', label: 'Underline', icon: Underline },
  ];

  return (
    <ToggleGroupMultiple
      value={value}
      onValueChange={setValue}
      items={items}
      size='icon'
    />
  );
}

Toggle Group Vertical

import { ToggleGroupSingle } from '@/components/ui/toggle';
import { AlignCenter, AlignLeft, AlignRight } from 'lucide-react-native';
import React, { useState } from 'react';

export function ToggleGroupVertical() {
  const [value, setValue] = useState('left');

  const items = [
    { value: 'left', label: 'Left Align', icon: AlignLeft },
    { value: 'center', label: 'Center Align', icon: AlignCenter },
    { value: 'right', label: 'Right Align', icon: AlignRight },
  ];

  return (
    <ToggleGroupSingle
      value={value}
      onValueChange={setValue}
      items={items}
      orientation='vertical'
      size='default'
    />
  );
}

Toggle Group Outline

import { ToggleGroupSingle } from '@/components/ui/toggle';
import { Bold, Italic, Underline } from 'lucide-react-native';
import React, { useState } from 'react';

export function ToggleGroupOutline() {
  const [value, setValue] = useState('bold');

  const items = [
    { value: 'bold', label: 'Bold', icon: Bold },
    { value: 'italic', label: 'Italic', icon: Italic },
    { value: 'underline', label: 'Underline', icon: Underline },
  ];

  return (
    <ToggleGroupSingle
      value={value}
      onValueChange={setValue}
      items={items}
      variant='outline'
      size='default'
    />
  );
}

API Reference

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.

ToggleGroup

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.

ToggleGroupItem

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.

ToggleGroupSingle

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.

ToggleGroupMultiple

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.

Accessibility

The Toggle components are built with accessibility in mind:

Uses TouchableOpacity for proper touch handling
Supports disabled state with visual feedback
Proper color contrast for different states
Screen reader compatible with semantic structure
Keyboard navigation support through native React Native components

Toast Video

On This Page

Installation Usage Examples Default Variants Sizes With Text Disabled Toggle Group Single Toggle Group Multiple Toggle Group Vertical Toggle Group Outline API Reference Toggle ToggleGroup ToggleGroupItem ToggleGroupSingle ToggleGroupMultiple Accessibility