Officina UI
Components

Switch

Accessible on/off toggle with label and description, controlled or uncontrolled.

Switch toggles a boolean setting. It manages focus and aria-checked for you.

Example

Preview

Receive an email when a report finishes.

import { Switch } from '@officina/ui';
import { useState } from 'react';

function Example() {
  const [on, setOn] = useState(true);
  return <Switch checked={on} onChange={setOn} label="Email notifications" />;
}

API

PropTypeDefaultDescription
checkedboolean—Controlled on/off state.
descriptionstring—Secondary helper text under the label.
disabledboolean—Disable interaction and dim the control.
invalidboolean—Marks the field invalid for validation styling and `aria-invalid`.
labelstring—Visible label rendered beside the switch.
namestring—Form field name, for native form submission / form libraries.
onChange(checked: boolean) => void—Called with the new boolean state when toggled.
requiredboolean—Marks the field as required for validation styling and `aria-required`.

CheckboxGroup

Controlled multi-select of checkboxes backed by an array of selected values.

SwitchGroup

Stacked rows of labeled switches for settings panels, tracked as an array of on values.

On this page

ExampleAPI