Components

Switch

An on/off control that works without hydration.

Preview

NotificationsDisabled setting

Usage

import { Switch, Label } from '@fwenthehunter/friendly-ui';

<Label className="flex items-center gap-2">
  <Switch name="notifications" defaultChecked />
  Notifications
</Label>

A native checkbox with role="switch" and themed track/thumb styling. The browser exposes checked state and handles Space, labels, focus, disabled state, and form values. The label should stay the same in both states.

The control toggles locally without JavaScript; persisting a setting requires form submission or your own client callback. Use checked and onChange in a client wrapper when controlled.

Props

Components accept native HTML props, className, and style. Server-compatible primitives also forward React 19 refs; Modal manages its own dialog ref.

Prop	Type	Default
`defaultChecked`	boolean	false
`checked`	boolean (controlled)	—