Data input
Checkbox
A native checkbox for an independent on/off choice, with a label, help text and error state.
| Class name | Type | Description |
|---|---|---|
checkboxplf:checkbox | Component | A native checkbox |
choiceplf:choice | Part | A row of a control and its label |
choice-labelplf:choice-label | Part | The label, the click target |
Space or clicking the label toggles the checkbox.
<div class="field">
<div class="choice">
<input class="checkbox" id="checkbox-news" name="news" value="yes" type="checkbox" aria-describedby="checkbox-news-help">
<label class="choice-label" for="checkbox-news">Receive project news</label>
</div>
<p class="field-help" id="checkbox-news-help">Space or clicking the label toggles the checkbox.</p>
</div><div class="plf:field">
<div class="plf:choice">
<input class="plf:checkbox" id="checkbox-news" name="news" value="yes" type="checkbox" aria-describedby="checkbox-news-help">
<label class="plf:choice-label" for="checkbox-news">Receive project news</label>
</div>
<p class="plf:field-help" id="checkbox-news-help">Space or clicking the label toggles the checkbox.</p>
</div>import { Checkbox, Field } from '@pelatform/react';
export function Example() {
return (
<Field help="Space or clicking the label toggles the checkbox.">
<Checkbox name="news" value="yes">Receive project news</Checkbox>
</Field>
);
}import { Checkbox, Field } from '@pelatform/react/prefixed';
export function Example() {
return (
<Field help="Space or clicking the label toggles the checkbox.">
<Checkbox name="news" value="yes">Receive project news</Checkbox>
</Field>
);
}<div class="field">
<div class="choice">
<input class="checkbox" id="checkbox-unchecked" name="unchecked" value="yes" type="checkbox">
<label class="choice-label" for="checkbox-unchecked">Unchecked</label>
</div>
<div class="choice">
<input class="checkbox" id="checkbox-checked" name="checked" value="yes" type="checkbox" checked>
<label class="choice-label" for="checkbox-checked">Checked</label>
</div>
</div><div class="plf:field">
<div class="plf:choice">
<input class="plf:checkbox" id="checkbox-unchecked" name="unchecked" value="yes" type="checkbox">
<label class="plf:choice-label" for="checkbox-unchecked">Unchecked</label>
</div>
<div class="plf:choice">
<input class="plf:checkbox" id="checkbox-checked" name="checked" value="yes" type="checkbox" checked>
<label class="plf:choice-label" for="checkbox-checked">Checked</label>
</div>
</div>import { Checkbox, Field } from '@pelatform/react';
export function Example() {
return (
<Field>
<Checkbox name="unchecked" value="yes">Unchecked</Checkbox>
<Checkbox name="checked" value="yes" defaultChecked>Checked</Checkbox>
</Field>
);
}import { Checkbox, Field } from '@pelatform/react/prefixed';
export function Example() {
return (
<Field>
<Checkbox name="unchecked" value="yes">Unchecked</Checkbox>
<Checkbox name="checked" value="yes" defaultChecked>Checked</Checkbox>
</Field>
);
}Disabled
Say why a choice is unavailable in its label; the disabled state alone does not explain it.
<div class="field">
<div class="choice">
<input class="checkbox" id="checkbox-disabled" type="checkbox" disabled>
<label class="choice-label" for="checkbox-disabled">Disabled</label>
</div>
<div class="choice">
<input class="checkbox" id="checkbox-disabled-checked" type="checkbox" checked disabled>
<label class="choice-label" for="checkbox-disabled-checked">Disabled and checked</label>
</div>
</div><div class="plf:field">
<div class="plf:choice">
<input class="plf:checkbox" id="checkbox-disabled" type="checkbox" disabled>
<label class="plf:choice-label" for="checkbox-disabled">Disabled</label>
</div>
<div class="plf:choice">
<input class="plf:checkbox" id="checkbox-disabled-checked" type="checkbox" checked disabled>
<label class="plf:choice-label" for="checkbox-disabled-checked">Disabled and checked</label>
</div>
</div>import { Checkbox, Field } from '@pelatform/react';
export function Example() {
return (
<Field>
<Checkbox disabled>Disabled</Checkbox>
<Checkbox defaultChecked disabled>Disabled and checked</Checkbox>
</Field>
);
}import { Checkbox, Field } from '@pelatform/react/prefixed';
export function Example() {
return (
<Field>
<Checkbox disabled>Disabled</Checkbox>
<Checkbox defaultChecked disabled>Disabled and checked</Checkbox>
</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: accept the terms to continue.
<div class="field">
<div class="choice">
<input class="checkbox" id="checkbox-terms" type="checkbox" required aria-invalid="true" aria-describedby="checkbox-terms-error">
<label class="choice-label" for="checkbox-terms">Accept the terms (required)</label>
</div>
<p class="field-error" id="checkbox-terms-error">Error: accept the terms to continue.</p>
</div><div class="plf:field">
<div class="plf:choice">
<input class="plf:checkbox" id="checkbox-terms" type="checkbox" required aria-invalid="true" aria-describedby="checkbox-terms-error">
<label class="plf:choice-label" for="checkbox-terms">Accept the terms (required)</label>
</div>
<p class="plf:field-error" id="checkbox-terms-error">Error: accept the terms to continue.</p>
</div>import { Checkbox, Field } from '@pelatform/react';
export function Example() {
return (
<Field error="Error: accept the terms to continue.">
<Checkbox required>Accept the terms (required)</Checkbox>
</Field>
);
}import { Checkbox, Field } from '@pelatform/react/prefixed';
export function Example() {
return (
<Field error="Error: accept the terms to continue.">
<Checkbox required>Accept the terms (required)</Checkbox>
</Field>
);
}<fieldset class="field field-group">
<legend class="field-legend">Notifications</legend>
<div class="choice">
<input class="checkbox" id="checkbox-group-email" name="notify" value="email" type="checkbox" checked aria-describedby="checkbox-group-help">
<label class="choice-label" for="checkbox-group-email">Email</label>
</div>
<div class="choice">
<input class="checkbox" id="checkbox-group-feed" name="notify" value="feed" type="checkbox" aria-describedby="checkbox-group-help">
<label class="choice-label" for="checkbox-group-feed">Feed</label>
</div>
<p class="field-help" id="checkbox-group-help">Choose any number of channels.</p>
</fieldset><fieldset class="plf:field plf:field-group">
<legend class="plf:field-legend">Notifications</legend>
<div class="plf:choice">
<input class="plf:checkbox" id="checkbox-group-email" name="notify" value="email" type="checkbox" checked aria-describedby="checkbox-group-help">
<label class="plf:choice-label" for="checkbox-group-email">Email</label>
</div>
<div class="plf:choice">
<input class="plf:checkbox" id="checkbox-group-feed" name="notify" value="feed" type="checkbox" aria-describedby="checkbox-group-help">
<label class="plf:choice-label" for="checkbox-group-feed">Feed</label>
</div>
<p class="plf:field-help" id="checkbox-group-help">Choose any number of channels.</p>
</fieldset>import { Checkbox, FieldGroup } from '@pelatform/react';
export function Example() {
return (
<FieldGroup legend="Notifications" help="Choose any number of channels.">
<Checkbox name="notify" value="email" defaultChecked>Email</Checkbox>
<Checkbox name="notify" value="feed">Feed</Checkbox>
</FieldGroup>
);
}import { Checkbox, FieldGroup } from '@pelatform/react/prefixed';
export function Example() {
return (
<FieldGroup legend="Notifications" help="Choose any number of channels.">
<Checkbox name="notify" value="email" defaultChecked>Email</Checkbox>
<Checkbox name="notify" value="feed">Feed</Checkbox>
</FieldGroup>
);
}React
Checkbox from @pelatform/react renders this checkbox, 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 checkbox |
None: the checkbox 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 choice row.
| Variable | Default |
|---|---|
--plf-choice-size |
1rem (16px) |
--plf-choice-accent |
--plf-color-primary |
--plf-control-height-md |
The label’s height on touch screens, at least 40px; 24px with a mouse |