Skip to content Skip to footer navigation
Light theme Dark theme
You are reading the Statamic 6 Alpha docs. 👀

Radio

Radio buttons are used to select a single option from a list of options.

<ui-radio-group name="favorite" label="Choose your favorite Star Wars movie">

    <ui-radio-item label="A New Hope" value="ep4"/>

    <ui-radio-item label="Empire Strikes Back" value="ep5" />

    <ui-radio-item label="Return of the Jedi" value="ep6" />

</ui-radio-group>

With descriptions

Radio buttons can have descriptions below their labels.

<ui-radio-group name="favorite" label="Choose your favorite meal">

    <ui-radio-item label="Breakfast" description="The morning meal. Should include eggs." value="breakfast" checked />

    <ui-radio-item label="Lunch" description="The mid-day meal. Should be protein heavy." value="lunch" />

    <ui-radio-item label="Dinner" description="The evening meal Should be delicious." value="dinner" />

</ui-radio-group>

Disabled items

Items can be disabled by using the disabled prop.

<ui-radio-group name="favorite" label="Choose your favorite Star Wars movie">

    <ui-radio-item label="A New Hope" value="ep4"/>

    <ui-radio-item label="Empire Strikes Back" value="ep5" />

    <ui-radio-item label="Return of the Jedi" value="ep6" />

    <ui-radio-item disabled label="the Force Awakens" value="ep7" />

    <ui-radio-item disabled label="The Last Jedi" value="ep8" />

    <ui-radio-item disabled label="The Rise of Skywalker" value="ep9" />

</ui-radio-group>