Radix Docs

Toggle

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

Usage


import {Toggle} from "@/components/ui/toggle";
 
<Toggle>Toggle</Toggle>;

Prop	Type	Default	Description
`pressed`	`boolean`	-	Controlled pressed state. When provided, the component becomes controlled.
`defaultPressed`	`boolean`	`false`	Uncontrolled initial pressed state. Used when `pressed` is not provided.
`onPressedChange`	`(pressed: boolean) => void`	-	Callback fired when the pressed state should change.
`disabled`	`boolean`	`false`	Disables the toggle. Prevents interaction and reduces opacity.
`asChild`	`boolean`	`false`	If true, clones props to the nearest child instead of rendering a Pressable. Useful for custom elements.
`variant`	`"default" \| "outline"`	`"default"`	The visual variant of the toggle. Controls the styling approach.
`size`	`"sm" \| "md" \| "lg" \| "xl"`	`"md"`	Sets the size of the toggle. Controls height, padding, and text size.
`className`	`string`	-	Custom Tailwind CSS classes to apply to the toggle.
`children`	`ReactNode`	-	Content to display inside the toggle.
`aria-label`	`string`	-	Web accessibility label for screen readers.
`testID`	`string`	-	React Native test identifier for testing frameworks.

The backbone hook for the toggle component that provides accessibility props and state management.

Parameters:

Parameter	Type	Default	Description
`pressed`	`boolean`	-	Controlled pressed state.
`defaultPressed`	`boolean`	`false`	Uncontrolled initial pressed state.
`onPressedChange`	`function`	-	Callback fired when the pressed state should change.
`disabled`	`boolean`	`false`	Disables the toggle.
`onPress`	`function`	-	Custom onPress handler.
`props`	`ToggleProps`	-	Additional props to pass through.

Returns:


{
  props: React.ComponentProps<typeof Pressable>;
  state: {
    isPressed: boolean;
  }
}

Property	Type	Description
`props`	`React.ComponentProps<typeof Pressable>`	Accessibility props to pass to the toggle component.
`state`	`{isPressed: boolean}`	The current pressed state of the toggle.

The Toggle component is built with accessibility in mind and includes:

accessibilityRole="button" for proper screen reader announcement
accessibilityState={{selected: boolean, disabled: boolean}} to communicate toggle state
Proper touch target size (minimum 44x44 points)
Screen reader optimized content

Variants:

Sizes:

States: