switch

33 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Switch anatomy parts

A Switch is composed of two parts: Switch.Root, which contains all parts of the switch and renders a visually hidden input within a form for event propagation, and Switch.Thumb, which is the thumb that visually indicates whether the switch is on or off.

Switch Root asChild prop

The Switch.Root component accepts an asChild prop (boolean, default: false) that changes the default rendered element for the one passed as a child, merging their props and behavior.

Switch Root defaultChecked prop

The Switch.Root component accepts a defaultChecked prop (boolean) that sets the state of the switch when it is initially rendered. Use this when you do not need to control the switch's state.

Switch Root controlled state

The Switch.Root component accepts a checked prop (boolean) for the controlled state of the switch. This must be used in conjunction with the onCheckedChange callback.

Switch Root onCheckedChange callback

The Switch.Root component accepts an onCheckedChange prop with signature (checked: boolean) => void. This event handler is called when the state of the switch changes.

Switch Root disabled prop

The Switch.Root component accepts a disabled prop (boolean) that, when true, prevents the user from interacting with the switch.

Switch Root required prop

The Switch.Root component accepts a required prop (boolean) that, when true, indicates that the user must check the switch before the owning form can be submitted.

Switch Root name prop

The Switch.Root component accepts a name prop (string) that sets the name of the switch. It is submitted with its owning form as part of a name/value pair.

Switch Root value prop

The Switch.Root component accepts a value prop (string, default: 'on') that sets the value given as data when submitted with a name.

Switch Root data-state attribute

The Switch.Root component renders a [data-state] attribute with values 'checked' or 'unchecked' to indicate the current state.

Switch Root data-disabled attribute

The Switch.Root component renders a [data-disabled] attribute when the switch is disabled.

Switch Thumb asChild prop

The Switch.Thumb component accepts an asChild prop (boolean, default: false) that changes the default rendered element for the one passed as a child, merging their props and behavior.

Switch Thumb data-state attribute

The Switch.Thumb component renders a [data-state] attribute with values 'checked' or 'unchecked' to indicate the current state of the switch.

Switch Thumb data-disabled attribute

The Switch.Thumb component renders a [data-disabled] attribute when the switch is disabled.

Switch unstable lower-level parts

Switch provides unstable lower-level parts prefixed with unstable_ for advanced use cases. These are: Switch.unstable_Provider (provides switch state and accepts form-related props), Switch.unstable_Trigger (the interactive button that wraps Switch.Thumb), and Switch.unstable_BubbleInput (the visually hidden input that Switch.Root renders by default, omittable when form submission is not needed). These parts have unstable APIs that may change in a future release.

Switch unstable parts example

Example showing how to use unstable low-level parts to decouple the hidden input: ```jsx import { Switch } from "radix-ui"; export default () => ( <Switch.unstable_Provider name="airplane-mode"> <Switch.unstable_Trigger> <Switch.Thumb /> </Switch.unstable_Trigger> {/* The hidden input can be omitted if you don't need form submission */} <Switch.unstable_BubbleInput /> </Switch.unstable_Provider> ); ```

Switch accessibility role

Switch adheres to the switch role requirements defined in the W3C WAI-ARIA APG patterns.

Switch basic anatomy code

Basic Switch composition: ```jsx import { Switch } from "radix-ui"; export default () => ( <Switch.Root> <Switch.Thumb /> </Switch.Root> ); ```

Switch unstable composition parts

Switch now exposes unstable composition parts: unstable_Provider, unstable_Trigger, and unstable_BubbleInput. These allow direct access and recomposition of the visually hidden inputs rendered for form submission.

Switch composition example with unstable parts

Example using unstable Switch composition parts: import { Switch } from "radix-ui"; function ExampleSwitch() { return ( <Switch.unstable_Provider> <Switch.unstable_Trigger> <Switch.Thumb /> </Switch.unstable_Trigger> {/* the hidden input is now exposed and can be omitted if not needed */} <Switch.unstable_BubbleInput /> </Switch.unstable_Provider> ); }

Switch form prop forwarding to bubble input

Forward the form prop to the bubble input element to fix non-parent form submissions in Switch.

Switch onCheckedChange signature changed

Switch's onCheckedChange callback changed from onCheckedChange(event) to onCheckedChange(checked: boolean).

Switch version 0.0.12 breaking change: readOnly prop removed

In Switch version 0.0.12, the readOnly prop was removed.

Switch size prop values

The Switch component supports three size values: 1, 2, and 3. These control the visual size of the switch control.

Switch variant prop values

The Switch component supports three variant values for visual style: surface, classic, and soft.

Switch color prop

The Switch component accepts a color prop that assigns a specific color from the theme's color palette. Examples include indigo, cyan, orange, crimson, and gray.

Switch highContrast prop

The Switch component accepts a highContrast boolean prop that increases color contrast in light mode.

Switch radius prop values

The Switch component supports three radius values: none, small, and full.

Switch disabled state

The Switch component supports the native disabled HTML attribute to create a disabled switch.

Switch defaultChecked prop

The Switch component accepts a defaultChecked prop that sets the switch to checked state by default.

Switch alignment with text

When composing Switch within Text component, the switch automatically centers vertically with the first line of text. This automatic alignment works for both single-line and multi-line text.

Switch inherits common margin props

The Switch component inherits props from the Switch primitive and supports common margin props from the layout system.

Basic Switch example

```jsx <Switch defaultChecked /> ``` This example shows a basic Switch component with the default checked state.

Give your agent this brain