Build / Atoms

Switch

atom
play-fn

An immediate on/off toggle.

Use a Switch when the change applies straight away (for example, "Discoverable by email"). If the value only takes effect on submit, use a Checkbox.

Built on input[type="checkbox"] with role="switch", so it keeps native keyboard and form behaviour while announcing as a switch.

import { Switch } from '@meetcard/deck'

Stories

Every preview below is the real component, rendered in this page from the same story Storybook runs. The width control resizes each preview's container; CSS media queries still follow the browser window, so breakpoint behaviour is worth checking in Storybook.

Default

Source

const Default = () => <Switch label="Discoverable by email" onChange={fn()} />;

On.

Source

const On = () => <Switch label="Discoverable by email" onChange={fn()} defaultChecked />;

Use a Switch when the change applies immediately. If it only takes effect on submit, use a Checkbox instead.

With Description

Source

const WithDescription = () => <Switch
    label="Discoverable by email"
    onChange={fn()}
    description="People who already have your email can find your card instantly." />;

Disabled while off.

Disabled

Source

const Disabled = () => <Switch label="Discoverable by email" onChange={fn()} disabled />;

Disabled while on — the setting is in effect but managed elsewhere.

Disabled On

Source

const DisabledOn = () => <Switch label="Discoverable by email" onChange={fn()} disabled defaultChecked />;

Props

Prop	Type	Default	Description
`label`required	`ReactNode`	—	—
`description`	`ReactNode`	—	—

Also accepts everything from Omit, so id, data-* and event handlers pass straight through.