Switch
Turns a setting on or off, taking effect immediately. For choices that apply when a form is submitted, use Checkbox.
Code
demo.tsx
import {SelectionControlAndLabel, Switch} from '@earendil-works/elanor-react';
export default function SwitchDemo() {
return (
<SelectionControlAndLabel
control={
<Switch.Root defaultChecked>
<Switch.Thumb />
</Switch.Root>
}
>
Desktop notifications
</SelectionControlAndLabel>
);
}Usage
import {SelectionControlAndLabel, Switch} from '@earendil-works/elanor-react';
<SelectionControlAndLabel
control={
<Switch.Root>
<Switch.Thumb />
</Switch.Root>
}
>
Desktop notifications
</SelectionControlAndLabel>;Disabled
Code
disabled.tsx
import {SelectionControlAndLabel, Switch} from '@earendil-works/elanor-react';
export default function SwitchDisabled() {
return (
<SelectionControlAndLabel
control={
<Switch.Root disabled>
<Switch.Thumb />
</Switch.Root>
}
>
Single sign-on (Enterprise only)
</SelectionControlAndLabel>
);
}API
Switch.Root
Accepts Base UI Switch.Root props.
Switch.Thumb
Accepts Base UI Switch.Thumb props.