Thành phần

Switch

On/off setting on Base UI Switch; on is an ink track with a paper thumb, optional ON/OFF text.

Nội dung tham khảo viết bằng tiếng Anh; mục “Vietnamese” có ví dụ tiếng Việt.

Breaking news alerts

Install

bash

npx shadcn add @eloquent/switch

Usage

tsx

import { Field, FieldLabel } from "@/components/ui/field";
import { Switch } from "@/components/ui/switch";

<Field orientation="horizontal">
  <Switch name="alerts" />
  <FieldLabel>Breaking news alerts</FieldLabel>
</Field>

<Switch onLabel="On" offLabel="Off" aria-label="Breaking news alerts" />

onLabel and offLabel are optional, decorative text; the switch role already announces the state. Without Field, wrap the switch in a <label>.

States

State	Treatment
Off	Paper track, 1px ink border, ink thumb at the start
On	Ink track, paper thumb at the end
Focus	2px ink outline, 2px offset
Invalid	2px ink border, plus the Field's rule and message
Disabled	Halftone border and thumb, `cursor-not-allowed`

Keyboard

Key	Action
Tab / Shift+Tab	Move focus to and from the switch (disabled switches are skipped)
Space	Toggle on and off

Vietnamese

Thông báo tin nóng

Ink adaptation

Upstream shadcn's rounded track and thumb, shadow and primary-colour track are removed; the sm size is dropped. The thumb slides with a 150ms transform that is switched off under prefers-reduced-motion. The 24px track sits in a 44px pointer target built from an ::after layer. There is no hover treatment. Built on Base UI Switch.