Switch

A switch allows a user to turn a setting on or off.

Installation

CLI

Manual

npx shadcn add https://hq-ui.vercel.app/r/nova/switch

switch-description

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

switch-choice-card

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

switch-disabled

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.

switch-invalid

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

switch-sizes