A control that allows the user to toggle between checked and not checked.

Installation

pnpm dlx FlowbyAr@latest add switch

Usage

import { Switch } from "@/components/ui/switch"
<Switch />

Description

Focus is shared across devices, and turns off when you leave the app.

Choice Card

Card-style selection where FieldLabel wraps the entire Field for a clickable card pattern.

Disabled

Add the disabled prop to the Switch component to disable the switch. Add the data-disabled prop to the Field component for styling.

Invalid

Add the aria-invalid prop to the Switch component to indicate an invalid state. Add the data-invalid prop to the Field component for styling.

You must accept the terms and conditions to continue.

Size

Use the size prop to change the size of the switch.

RTL

To enable RTL support in FlowbyAr/ui, see the RTL configuration guide.

يتم مشاركة التركيز عبر الأجهزة، ويتم إيقاف تشغيله عند مغادرة التطبيق.

API Reference

See the Radix Switch documentation.