Toggle

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

Usage

The Toggle component is a compound component that allows users to toggle between two states, such as "on" and "off".

import { Toggle } from "@elemnts-ui/react"

<Toggle.Root>
	{/* ...content */}
</Toggle.Root>

Controlled

Use the pressed and onPressedChange props to control the state of the toggle.

Indicator

Use the Toggle.Indicator component to render different content based on the toggle state. The fallback prop is rendered when the toggle is not pressed.

Disabled

The toggle can be disabled using the disabled prop.

Anatomy

The Toggle component consists of the following subcomponents:

Toggle.Root: The root container for the toggle button.
Toggle.Indicator: A component that conditionally renders its children based on the toggle state.
Toggle.Context: A component that provides access to the toggle's state via a render prop.

API Reference

Toggle

Manages the state and appearance of the toggle button.

Prop	Type	Default
defaultPressed	`boolean`	`false`
onPressedChange	`(pressed: boolean) => void`
pressed	`boolean`
disabled	`boolean`	`false`
asChild	`boolean`	`false`

ToggleIndicator

Renders the indicator of the toggle button.

Prop	Type	Default
fallback	`ReactNode`
asChild	`boolean`	`false`