Data input
Radio
Native radio buttons for choosing one option from a group, with a legend, help text and error state.
| Class name | Type | Description |
|---|---|---|
radioplf:radio | Component | A native radio button |
choiceplf:choice | Part | A row of a control and its label |
choice-labelplf:choice-label | Part | The label, the click target |
Default
Give the group one name; a different name makes a separate group.
<fieldset class="field field-group">
<legend class="field-legend">Delivery frequency</legend>
<div class="choice">
<input class="radio" id="radio-daily" name="frequency" value="daily" type="radio" checked aria-describedby="radio-frequency-help">
<label class="choice-label" for="radio-daily">Daily</label>
</div>
<div class="choice">
<input class="radio" id="radio-weekly" name="frequency" value="weekly" type="radio" aria-describedby="radio-frequency-help">
<label class="choice-label" for="radio-weekly">Weekly</label>
</div>
<div class="choice">
<input class="radio" id="radio-monthly" name="frequency" value="monthly" type="radio" disabled>
<label class="choice-label" for="radio-monthly">Monthly (unavailable)</label>
</div>
<p class="field-help" id="radio-frequency-help">Arrow keys move the selection within this group.</p>
</fieldset><fieldset class="plf:field plf:field-group">
<legend class="plf:field-legend">Delivery frequency</legend>
<div class="plf:choice">
<input class="plf:radio" id="radio-daily" name="frequency" value="daily" type="radio" checked aria-describedby="radio-frequency-help">
<label class="plf:choice-label" for="radio-daily">Daily</label>
</div>
<div class="plf:choice">
<input class="plf:radio" id="radio-weekly" name="frequency" value="weekly" type="radio" aria-describedby="radio-frequency-help">
<label class="plf:choice-label" for="radio-weekly">Weekly</label>
</div>
<div class="plf:choice">
<input class="plf:radio" id="radio-monthly" name="frequency" value="monthly" type="radio" disabled>
<label class="plf:choice-label" for="radio-monthly">Monthly (unavailable)</label>
</div>
<p class="plf:field-help" id="radio-frequency-help">Arrow keys move the selection within this group.</p>
</fieldset>import { FieldGroup, Radio } from '@pelatform/react';
export function Example() {
return (
<FieldGroup legend="Delivery frequency" help="Arrow keys move the selection within this group.">
<Radio name="frequency" value="daily" defaultChecked>Daily</Radio>
<Radio name="frequency" value="weekly">Weekly</Radio>
<Radio name="frequency" value="monthly" disabled>Monthly (unavailable)</Radio>
</FieldGroup>
);
}import { FieldGroup, Radio } from '@pelatform/react/prefixed';
export function Example() {
return (
<FieldGroup legend="Delivery frequency" help="Arrow keys move the selection within this group.">
<Radio name="frequency" value="daily" defaultChecked>Daily</Radio>
<Radio name="frequency" value="weekly">Weekly</Radio>
<Radio name="frequency" value="monthly" disabled>Monthly (unavailable)</Radio>
</FieldGroup>
);
}Disabled
Say why a choice is unavailable in its label; the disabled state alone does not explain it.
<fieldset class="field field-group" disabled>
<legend class="field-legend">Delivery channel</legend>
<div class="choice">
<input class="radio" id="radio-disabled-email" name="disabled-channel" value="email" type="radio" checked>
<label class="choice-label" for="radio-disabled-email">Email (disabled)</label>
</div>
<div class="choice">
<input class="radio" id="radio-disabled-feed" name="disabled-channel" value="feed" type="radio">
<label class="choice-label" for="radio-disabled-feed">Feed (disabled)</label>
</div>
</fieldset><fieldset class="plf:field plf:field-group" disabled>
<legend class="plf:field-legend">Delivery channel</legend>
<div class="plf:choice">
<input class="plf:radio" id="radio-disabled-email" name="disabled-channel" value="email" type="radio" checked>
<label class="plf:choice-label" for="radio-disabled-email">Email (disabled)</label>
</div>
<div class="plf:choice">
<input class="plf:radio" id="radio-disabled-feed" name="disabled-channel" value="feed" type="radio">
<label class="plf:choice-label" for="radio-disabled-feed">Feed (disabled)</label>
</div>
</fieldset>import { FieldGroup, Radio } from '@pelatform/react';
export function Example() {
return (
<FieldGroup legend="Delivery channel" disabled>
<Radio name="disabled-channel" value="email" defaultChecked>Email (disabled)</Radio>
<Radio name="disabled-channel" value="feed">Feed (disabled)</Radio>
</FieldGroup>
);
}import { FieldGroup, Radio } from '@pelatform/react/prefixed';
export function Example() {
return (
<FieldGroup legend="Delivery channel" disabled>
<Radio name="disabled-channel" value="email" defaultChecked>Email (disabled)</Radio>
<Radio name="disabled-channel" value="feed">Feed (disabled)</Radio>
</FieldGroup>
);
}Invalid
Your application adds and removes aria-invalid on each radio and the message; start the message with “Error:” so the state does not rely on color alone.
<fieldset class="field field-group">
<legend class="field-legend">Required delivery channel</legend>
<div class="choice">
<input class="radio" id="radio-channel-email" name="channel" value="email" type="radio" required aria-invalid="true" aria-describedby="radio-channel-error">
<label class="choice-label" for="radio-channel-email">Email</label>
</div>
<div class="choice">
<input class="radio" id="radio-channel-feed" name="channel" value="feed" type="radio" required aria-invalid="true" aria-describedby="radio-channel-error">
<label class="choice-label" for="radio-channel-feed">Feed</label>
</div>
<p class="field-error" id="radio-channel-error">Error: choose a delivery channel.</p>
</fieldset><fieldset class="plf:field plf:field-group">
<legend class="plf:field-legend">Required delivery channel</legend>
<div class="plf:choice">
<input class="plf:radio" id="radio-channel-email" name="channel" value="email" type="radio" required aria-invalid="true" aria-describedby="radio-channel-error">
<label class="plf:choice-label" for="radio-channel-email">Email</label>
</div>
<div class="plf:choice">
<input class="plf:radio" id="radio-channel-feed" name="channel" value="feed" type="radio" required aria-invalid="true" aria-describedby="radio-channel-error">
<label class="plf:choice-label" for="radio-channel-feed">Feed</label>
</div>
<p class="plf:field-error" id="radio-channel-error">Error: choose a delivery channel.</p>
</fieldset>import { FieldGroup, Radio } from '@pelatform/react';
export function Example() {
return (
<FieldGroup legend="Required delivery channel" error="Error: choose a delivery channel.">
<Radio name="channel" value="email" required>Email</Radio>
<Radio name="channel" value="feed" required>Feed</Radio>
</FieldGroup>
);
}import { FieldGroup, Radio } from '@pelatform/react/prefixed';
export function Example() {
return (
<FieldGroup legend="Required delivery channel" error="Error: choose a delivery channel.">
<Radio name="channel" value="email" required>Email</Radio>
<Radio name="channel" value="feed" required>Feed</Radio>
</FieldGroup>
);
}React
Radio from @pelatform/react renders this radio button, in a choice row with its label when it has children, and takes its description and error state from a FieldGroup or Field around it.
| Prop | Values | Default |
|---|---|---|
children |
The label, in a choice row with the radio button |
None: the radio button alone |
The other props are the native radio button’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 |
--plf-field-gap |
--plf-space-2, the gap between the legend, rows and messages |