Toucan

Add it to your project

Eject the complete toggle group, then import from its generated local barrel. The copied source and CSS belong to your application.

bash

pnpm exec toucan eject toggle

bash

npx toucan eject toggle

app.tsx

import { Toggle } from '@/components/toucan/toggle';

Use when

Changing a boolean setting should take effect immediately.

Avoid when

The choice is submitted later as part of a form; Checkbox may be clearer.

Example

Dark mode

Notifications

Receive push notifications

Compact

API reference

Generated from packages/react/src/components. Only Toucan-specific props are listed; forwarded native props remain available as noted for each export.

Toggle

Props type: ToggleProps

Name	Type	Default	Required	Description
`checked`	`boolean`	`undefined`	No	Controlled checked state.
`defaultChecked`	`boolean`	`false`	No	Initial checked state when the component is uncontrolled.
`description`	`string`	`undefined`	No	Supporting text connected to the control.
`disabled`	`boolean`	`undefined`	No	Prevents interaction when true.
`hideLabel`	`boolean`	`false`	No	Visually hide the label while keeping it available to assistive technology.
`label`	`string`	—	Required	Visible or accessible label for the control.
`onChange`	`(checked: boolean) => void`	`undefined`	No	Called when the value changes.
`size`	`"sm" \| "md"`	`'md'`	No	Visual size variant.

Also accepts the native button attributes that are not replaced by a Toucan prop.

Type exports

ToggleProps

Accessibility

Uses switch semantics and exposes its checked state.
A visible or accessible label is required.

Token families

togglefocus

Related components

Checkbox Button