Data input
Switch
A native checkbox styled as an on/off switch for a setting, with a label, help text and error state.
| Class name | Type | Description |
|---|---|---|
toggleplf:toggle | Component | A switch on a checkbox with role=switch |
choiceplf:choice | Part | A row of a control and its label |
choice-labelplf:choice-label | Part | The label, the click target |
Default
A switch needs role="switch" and submits like a checkbox; use it for a setting that takes effect at once, and a Checkbox for a choice submitted with a form.
Space or clicking the label toggles the switch.
<div class="field">
<div class="choice">
<input class="toggle" id="switch-updates" name="updates" value="yes" type="checkbox" role="switch" checked aria-describedby="switch-updates-help">
<label class="choice-label" for="switch-updates">Automatic updates</label>
</div>
<p class="field-help" id="switch-updates-help">Space or clicking the label toggles the switch.</p>
</div><div class="plf:field">
<div class="plf:choice">
<input class="plf:toggle" id="switch-updates" name="updates" value="yes" type="checkbox" role="switch" checked aria-describedby="switch-updates-help">
<label class="plf:choice-label" for="switch-updates">Automatic updates</label>
</div>
<p class="plf:field-help" id="switch-updates-help">Space or clicking the label toggles the switch.</p>
</div>import { Field, Switch } from '@pelatform/react';
export function Example() {
return (
<Field help="Space or clicking the label toggles the switch.">
<Switch name="updates" value="yes" defaultChecked>Automatic updates</Switch>
</Field>
);
}import { Field, Switch } from '@pelatform/react/prefixed';
export function Example() {
return (
<Field help="Space or clicking the label toggles the switch.">
<Switch name="updates" value="yes" defaultChecked>Automatic updates</Switch>
</Field>
);
}<div class="field">
<div class="choice">
<input class="toggle" id="switch-disabled" type="checkbox" role="switch" disabled>
<label class="choice-label" for="switch-disabled">Disabled</label>
</div>
<div class="choice">
<input class="toggle" id="switch-disabled-on" type="checkbox" role="switch" checked disabled>
<label class="choice-label" for="switch-disabled-on">Disabled and on</label>
</div>
</div><div class="plf:field">
<div class="plf:choice">
<input class="plf:toggle" id="switch-disabled" type="checkbox" role="switch" disabled>
<label class="plf:choice-label" for="switch-disabled">Disabled</label>
</div>
<div class="plf:choice">
<input class="plf:toggle" id="switch-disabled-on" type="checkbox" role="switch" checked disabled>
<label class="plf:choice-label" for="switch-disabled-on">Disabled and on</label>
</div>
</div>import { Field, Switch } from '@pelatform/react';
export function Example() {
return (
<Field>
<Switch disabled>Disabled</Switch>
<Switch defaultChecked disabled>Disabled and on</Switch>
</Field>
);
}import { Field, Switch } from '@pelatform/react/prefixed';
export function Example() {
return (
<Field>
<Switch disabled>Disabled</Switch>
<Switch defaultChecked disabled>Disabled and on</Switch>
</Field>
);
}Invalid
Your application adds and removes aria-invalid and the message; start the message with “Error:” so the state does not rely on color alone.
Error: enable the setting to continue.
<div class="field">
<div class="choice">
<input class="toggle" id="switch-review" type="checkbox" role="switch" required aria-invalid="true" aria-describedby="switch-review-error">
<label class="choice-label" for="switch-review">Enable the required review setting</label>
</div>
<p class="field-error" id="switch-review-error">Error: enable the setting to continue.</p>
</div><div class="plf:field">
<div class="plf:choice">
<input class="plf:toggle" id="switch-review" type="checkbox" role="switch" required aria-invalid="true" aria-describedby="switch-review-error">
<label class="plf:choice-label" for="switch-review">Enable the required review setting</label>
</div>
<p class="plf:field-error" id="switch-review-error">Error: enable the setting to continue.</p>
</div>import { Field, Switch } from '@pelatform/react';
export function Example() {
return (
<Field error="Error: enable the setting to continue.">
<Switch required>Enable the required review setting</Switch>
</Field>
);
}import { Field, Switch } from '@pelatform/react/prefixed';
export function Example() {
return (
<Field error="Error: enable the setting to continue.">
<Switch required>Enable the required review setting</Switch>
</Field>
);
}React
Switch from @pelatform/react renders this switch, a checkbox with role="switch", in a choice row with its label when it has children, and takes its description and error state from a Field or FieldGroup around it.
| Prop | Values | Default |
|---|---|---|
children |
The label, in a choice row with the switch |
None: the switch alone |
The other props are the native checkbox’s, checked, defaultChecked, onChange, className and ref included.
CSS variables
Override on a root or on a single switch; --plf-choice-size does not apply to it.
| Variable | Default |
|---|---|
--plf-switch-width |
2. (40px) |
--plf-switch-height |
1. (24px); the thumb is 4px smaller than the inner height |
--plf-choice-accent |
--plf-color-primary, the track of a switch that is on |
--plf-control-height-md |
The label’s height on touch screens, at least 40px; 24px with a mouse |