Components › Forms & input › Choice › Switch

Switch

canon

On/off control that applies immediately.

Size sm (acrm !3911, AD 26 Sep 2026): 30×17, knob 13px, --shadow-xs, label var(--small) in --fg-secondary, gap --sp-2 — ONLY the secondary option in a dialog footer next to buttons (Další / Vytvořit další / Nevolat / Pozvánky); the full size would compete with the primary. Replaces the private .tk-more/.sw copy — migrated on 27 Sep 2026 (acrm !3950): TaskDialog „Další“, NewContactDialog „Vytvořit další“/„Nevolat“, NewMeetingForm „Pozvánky“/„Nahrávat“; .tk-more/.sw deleted, the app has ONE switch. Clickable label (acrm !3933, AD 26 Sep 2026): a click on the VISIBLE label toggles (not with labelHidden); focus stays on the role=switch button, onChange(on, event) keeps stopPropagation for clickable rows, no double toggle.

Used in 35 files · 16 areas · 52× — components/CheckMenu, components/assistant, components/datamart, components/mail, components/meetings, components/person …

@acrm/ui <Switch>.acrm-switch .acrm-switch-rowSource Story Legacy card Inputs.html

Examples Code Usage Accessibility Changelog

Default

Include inactive

components--switch--defaultOpen standalone ↗Code

packages/ui/stories/switch.stories.tsx

export const Default = () => <SwitchRow label="Include inactive" initial />;

Variants

Include inactivelabel end — default

Track openslabel start — mail compose footer only

components--switch--variantsOpen standalone ↗Code

packages/ui/stories/switch.stories.tsx

export const Variants = () => (
  <div style={row}>
    <Labeled label="label end — default">
      <SwitchRow label="Include inactive" initial />
    </Labeled>
    <Labeled label="label start — mail compose footer only">
      <SwitchRow label="Track opens" labelPosition="start" initial />
    </Labeled>
  </div>
);

Sizes

Vytvořit dalšíVytvořit další

default — 34×20, label 13px --ink-800

Vytvořit dalšíVytvořit další

sm — 30×17, label 12px (--small) --fg-secondary · dialog footer next to buttons

components--switch--sizesOpen standalone ↗Code

packages/ui/stories/switch.stories.tsx

export const Sizes = () => (
  <div style={grid}>
    <Labeled label="default — 34×20, label 13px --ink-800">
      <div style={row}>
        <SwitchRow label="Vytvořit další" />
        <SwitchRow label="Vytvořit další" initial />
      </div>
    </Labeled>
    <Labeled label="sm — 30×17, label 12px (--small) --fg-secondary · dialog footer next to buttons">
      <div style={row}>
        <SwitchRow label="Vytvořit další" size="sm" />
        <SwitchRow label="Vytvořit další" size="sm" initial />
      </div>
    </Labeled>
  </div>
);

States

Include inactiveoff

Include inactiveon

Focus: 3px ring (color-mix --accent 30%) on the track via `.acrm-switch:focus-visible`. No disabled style exists in inputs.css.

components--switch--statesOpen standalone ↗Code

packages/ui/stories/switch.stories.tsx

export const States = () => (
  <div style={grid}>
    <div style={row}>
      <Labeled label="off">
        <SwitchRow label="Include inactive" />
      </Labeled>
      <Labeled label="on">
        <SwitchRow label="Include inactive" initial />
      </Labeled>
    </div>
    <span style={{ color: 'var(--fg-muted)', font: 'var(--small)' }}>
      Focus: 3px ring (color-mix --accent 30%) on the track via `.acrm-switch:focus-visible`. No
      disabled style exists in inputs.css.
    </span>
  </div>
);

Composition

Include inactiveOnly with e-mailFirst row is a header

stacked options — label to the right

Offer in the dialer

Show on the company card

Send a weekly digest

settings list — label left, switch right

components--switch--compositionOpen standalone ↗Code

packages/ui/stories/switch.stories.tsx

export const Composition = () => (
  <div style={grid}>
    <Labeled label="stacked options — label to the right">
      <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--sp-3)' }}>
        <SwitchRow label="Include inactive" initial />
        <SwitchRow label="Only with e-mail" />
        <SwitchRow label="First row is a header" initial />
      </div>
    </Labeled>
    <Labeled label="settings list — label left, switch right">
      <div style={{ display: 'grid', minWidth: 360 }}>
        {[
          ['Offer in the dialer', true],
          ['Show on the company card', true],
          ['Send a weekly digest', false],
        ].map(([name, on]) => (
          <div
            key={String(name)}
            style={{
              display: 'flex',
              alignItems: 'center',
              gap: 'var(--sp-3)',
              height: 'var(--row-h)',
              borderBottom: '1px solid var(--border)',
            }}
          >
            <span style={{ flex: 1, font: 'var(--cell)' }}>{name}</span>
            <SwitchRow label={String(name)} initial={Boolean(on)} labelHidden />
          </div>
        ))}
      </div>
    </Labeled>
  </div>
);