Efniv0.1

Components

Switch

Immediate on/off. Use when the change applies instantly; if the user must confirm, use Checkbox.

When to usewhen flipping the control immediately changes something — a setting, a subscription, a live filter.

Import

import { Switch } from "@ravnhq/efni/switch"

Default

<Switch id="alerts" defaultChecked />
<Label htmlFor="alerts">Push alerts</Label>

Small

<Switch size="sm" />

Disabled

Accessibility

KeyAction
Space / EnterToggle the switch.
TabMove focus to and from the switch.
  • Always pair with a Label using htmlFor — the visual track alone isn't announced as a name.
  • Renders as a native checkbox under the hood — form submission carries the value automatically.

Guidelines

Do
  • Use for settings that apply the moment they change.
  • Put the label on the same row as the switch, not stacked above it.
  • Use small size inside dense tables or repeated rows.
Don't
  • Don't use for form-submit fields — Checkbox is expected for accept/agree, terms, opt-in.
  • Don't stack two switches with opposite meanings ('Show archived' + 'Hide archived').
  • Don't hide destructive side effects behind a switch flip — pair with a Toast confirmation.

Props

PropTypeDefaultDescription
checkedboolean—Whether the switch is currently active. To render an uncontrolled switch, use the defaultChecked prop instead.
defaultCheckedbooleanfalseWhether the switch is initially active. To render a controlled switch, use the checked prop instead.
onCheckedChange((checked: boolean, eventDetails: SwitchRoot.ChangeEventDetails) => void)—Event handler called when the switch is activated or deactivated.
size"default" | "sm""default"Compact for dense tables.
disabledbooleanfalseWhether the component should ignore user interaction.
…propsSwitchPrimitive.Root.Props—Everything Switch passes to the element it renders.