Radio

Examples

Basic

Input + label pair.

Option one

Option two

Controlled

A working group — Alpine reports the selection (covers PF\u2019s controlled and uncontrolled sections).

Option one

Option two

Selected: one

Reversed

The label precedes the input in the DOM.

Label before the input

Label wraps

Long labels wrap while the input stays on the first line.

A really long radio label that wraps onto several lines while the input stays aligned to the first line

Disabled

Native disabled state.

Disabled, unselected

Disabled, selected

With description

A description line under the label.

Standard 3 GB storage, basic support.

Pro 30 GB storage, priority support.

Enterprise Unlimited storage, dedicated account manager.

With body

Extra body content under the radio.

Custom plan Choose features individually after picking this option.

With description and body

Both together.

With description and body A longer explanation of what selecting this option means. Extra body content - links or fine print can live here.

Standalone input

pf-m-standalone — input only, labelled via aria.

Documentation

Radio props

Parameters accepted by {#include components/forms/radio ... /}. Model mode: pass radio=<Radio> built in Java instead — the Java tab on each example shows the builder.

* required
Name	Type	Description
* `id`	String	Wrapper id; inner input gets `{id}-field`.
* `name`	String	Shared name across radios in the same group — browser enforces single-selection by name.
`label`	String	Visible label. Required for non-standalone radios.
`checked` / `disabled`	boolean	Standard HTML form attributes.
`description`	String	Muted second-line text.
`body`	String (HTML)	Extra content under label/description.
`standalone`	boolean	No visible label.

Usage

Group by name. The browser enforces single-selection only if all radios in a group share the same name.

Always pre-select one. Showing radios where nothing is selected forces users to commit to a choice they may not understand.

Edit radio.html on GitHub