Radio Group

An easily stylable radio button component.

Choose an option: Option 1 Option 2 Option 3

<f:variable name="items" value="{
    0: { value: 'option1', text: 'Option 1' },
    1: { value: 'option2', text: 'Option 2' },
    2: { value: 'option3', text: 'Option 3' }
}" />

<ui:radioGroup.root defaultValue="option2">
    <ui:radioGroup.label>Choose an option:</ui:radioGroup.label>
    <f:for each="{items}" as="item">
        <ui:radioGroup.item value="{item.value}">
            <ui:radioGroup.itemControl />
            <ui:radioGroup.itemText>{item.text}</ui:radioGroup.itemText>
        </ui:radioGroup.item>
    </f:for>
</ui:radioGroup.root>

import { mount } from 'fluid-primitives';
import { RadioGroup } from 'fluid-primitives/radio-group';

mount('radio-group', ({ props }) => {
	const radioGroup = new RadioGroup(props);
	radioGroup.init();
	return radioGroup;
});

Features

Full keyboard navigation support
Supports horizontal and vertical orientations
Syncs with native form elements for proper form submission
Works with Field component for form integration

Installation

typo3 ui:add radio-group

Read more about installing Components and Primitives.

Examples

Disabled Items

Disable specific radio options.

Select plan: Available Plan Unavailable Plan

<ui:radioGroup.root defaultValue="available">
    <ui:radioGroup.label>Select plan:</ui:radioGroup.label>
    <ui:radioGroup.item value="available">
        <ui:radioGroup.itemControl />
        <ui:radioGroup.itemText>Available Plan</ui:radioGroup.itemText>
    </ui:radioGroup.item>
    <ui:radioGroup.item value="unavailable" disabled="{true}">
        <ui:radioGroup.itemControl />
        <ui:radioGroup.itemText>Unavailable Plan</ui:radioGroup.itemText>
    </ui:radioGroup.item>
</ui:radioGroup.root>

Disabled Group

Disable the entire radio group.

Disabled group: Option 1 Option 2

<ui:radioGroup.root disabled="{true}" defaultValue="option1">
    <ui:radioGroup.label>Disabled group:</ui:radioGroup.label>
    <ui:radioGroup.item value="option1">
        <ui:radioGroup.itemControl />
        <ui:radioGroup.itemText>Option 1</ui:radioGroup.itemText>
    </ui:radioGroup.item>
    <ui:radioGroup.item value="option2">
        <ui:radioGroup.itemControl />
        <ui:radioGroup.itemText>Option 2</ui:radioGroup.itemText>
    </ui:radioGroup.item>
</ui:radioGroup.root>

Anatomy

<primitives:radioGroup.root>
    <primitives:radioGroup.item>
        <primitives:radioGroup.itemControl />
        <primitives:radioGroup.itemText />
        <primitives:radioGroup.itemHiddenInput />
    </primitives:radioGroup.item>
    <primitives:radioGroup.indicator />
</primitives:radioGroup.root>