Acronis UIKit
Components

Switch

Toggle between two states.

Usage

import { Switch } from '@acronis-platform/ui-react';

Switch wraps Base UI's Switch primitive — keyboard interaction, focus management, and ARIA come from Base UI. A 32×16 track with a 12px thumb, themed by the --ui-switch-* tokens.

Examples

A bare switch (name it with aria-label):

<Switch aria-label="Enable notifications" />

With a label — the whole row becomes clickable:

<Switch label="Enable notifications" />

Controlled and disabled states:

const [checked, setChecked] = React.useState(false);

<Switch label="Dark mode" checked={checked} onCheckedChange={setChecked} />
<Switch label="Locked setting" checked disabled />

API Reference

Prop

Type

Edit on GitHub

On this page