Switch

A Switch turns a setting on or off, and the change applies at once. Use a Checkbox for choices that a form submits later.

Usage#

import { Switch } from "@clawscale/react";

<Switch checked={paused} label="Pause ingestion" onChange={(event) => setPaused(event.currentTarget.checked)} />

Examples#

Basic#

Pass checked and onChange to control the switch, or defaultChecked to leave it uncontrolled. The whole label is clickable.

Pause ingestionAuto-scale workers

core/switch/basic.tsx

import { Switch } from "@clawscale/react";
import { useState } from "react";

export default function SwitchBasic() {
  const [paused, setPaused] = useState(false);
  return (
    <div>
      <Switch checked={paused} label="Pause ingestion" onChange={(event) => setPaused(event.currentTarget.checked)} />
      <Switch defaultChecked label="Auto-scale workers" />
    </div>
  );
}

Inner labels#

innerLabel shows text inside the track while the switch is off. innerLabelChecked replaces it while the switch is on.

off

Scheduler

off

Debug logging

core/switch/inner-labels.tsx

import { Switch } from "@clawscale/react";

export default function SwitchInnerLabels() {
  return (
    <div>
      <Switch defaultChecked innerLabel="off" innerLabelChecked="on" label="Scheduler" />
      <Switch innerLabel="off" innerLabelChecked="on" label="Debug logging" />
    </div>
  );
}

Alignment#

alignIndicator="end" moves the switch after the label. Use it in settings lists with a fixed width.

Failure alertsWeekly usage reportSchema drift checks

core/switch/alignment.tsx

import { Switch } from "@clawscale/react";

export default function SwitchAlignment() {
  return (
    <div style={{ width: 260 }}>
      <Switch alignIndicator="end" defaultChecked label="Failure alerts" />
      <Switch alignIndicator="end" label="Weekly usage report" />
      <Switch alignIndicator="end" defaultChecked label="Schema drift checks" />
    </div>
  );
}

Size#

size accepts medium (default) and large.

MediumLarge

core/switch/size.tsx

import { Switch } from "@clawscale/react";

export default function SwitchSize() {
  return (
    <>
      <Switch defaultChecked label="Medium" size="medium" />
      <Switch defaultChecked label="Large" size="large" />
    </>
  );
}

Disabled#

disabled blocks changes in both states.

Audit logging (required)Public dashboards

core/switch/disabled.tsx

import { Switch } from "@clawscale/react";

export default function SwitchDisabled() {
  return (
    <div>
      <Switch defaultChecked disabled label="Audit logging (required)" />
      <Switch disabled label="Public dashboards" />
    </div>
  );
}

Interactive playground#

View source on GitHub

Props interface#

Switch also accepts the HTML attributes of an <input>.

interface SwitchProps extends ControlProps@clawscale/react

Switch component props.

Props	Description
`alignIndicator`	`Alignment` = `Alignment.START` Alignment of the indicator within container. Inherited from `ControlProps`
`checked`	`boolean` Whether the control is checked. Inherited from `CheckedControlProps`
`children`	`React.ReactNode` JSX label for the control. Inherited from `ControlProps`
`className`	`string` A space-delimited list of class names to pass along to a child element. Inherited from `Props`
`defaultChecked`	`boolean` Whether the control is initially checked (uncontrolled mode). Inherited from `CheckedControlProps`
`disabled`	`boolean` Whether the control is non-interactive. Inherited from `ControlProps`
`inline`	`boolean` Whether the control should appear as an inline element. Inherited from `ControlProps`
`innerLabel`	`string` Text to display inside the switch indicator when unchecked.
`innerLabelChecked`	`string` = `innerLabel` Text to display inside the switch indicator when checked. If `innerLabel` is provided and this prop is omitted, then `innerLabel` will be used for both states.
`inputRef`	`React.Ref<HTMLInputElement>` Ref attached to the HTML `<input>` element backing this component. Inherited from `ControlProps`
`label`	`string` Text label for the control. Inherited from `ControlProps`
`labelElement`	`React.ReactNode` JSX element label for the control. Inherited from `ControlProps`
`large`deprecated	`boolean` = `false` Whether this control should use large styles. use `size="large"` instead Inherited from `ControlProps`
`onChange`	`React.ChangeEventHandler<HTMLInputElement>` Event handler invoked when input value is changed. Inherited from `CheckedControlProps`
`size`	`NonSmallSize` = `"medium"` Size of the control. Inherited from `ControlProps`
`tagName`	`keyof React.JSX.IntrinsicElements` = `"label"` Name of the HTML tag that wraps the checkbox. Inherited from `ControlProps`