# Radio Button

<flow-radio>

Reactive

Stable

The radio button component allows the user to select mutually exclusive options from a group.

To combine a set of radio buttons into a group set the name attribute of each radio button to a unique group name.

Radio buttons emit the flowChange when selected or deselected.

TIP

Combine radio components in a radio group to add Flo.w reactivity and automatically group the child radio buttons.

# Examples

# Color

Use the color attribute to set the radio button's color from the application palette. By default, the secondary application color is used to match Material Design guidelines.

# Label Alignment

Use the align attribute to set the position of the radio button relative to the label.

# Radio Button States

The checked and disabled attributes can be set to control the radio button state.

# Properties

Property	Description	Type	Default
`align`	The radio button position relative to its label.	`"end" \| "start"`	`'start'`
`checked`	The checked state of the radio button	`boolean`	`false`
`color`	The color of the radio button. Colors are taken from the application palette.	`"danger" \| "gray" \| "primary" \| "secondary" \| "success" \| "warning"`
`disabled`	Set to `true` to disable interaction with the checkbox.	`boolean`	`false`
`label`	If set, specifies the radio button label text. Otherwise, the text content of the element is used as the label text.	`string`
`name`	The name attribute of the radio button.	`string`
`value`	The value attribute of the radio button.	`string`

# Events

Event	Description	Type
`flowBlur`	Emitted when the control loses focus.	`any`
`flowChange`	Emitted when the control's checked state changes.	`any`
`flowFocus`	Emitted when the control gains focus.	`any`

# Methods

Method	Description
`removeFocus`	`removeFocus() => Promise<void>` Remove focus from the checkbox.
`setFocus`	`setFocus() => Promise<void>` Set focus on the checkbox.

# Slots

Slot	Description
`(default)`	Child radio buttons to place in the radio button group.

# CSS Custom Properties

Name	Description
`--color`	Color of the checkbox (default: secondary)
`--label-color`	Color of the checkbox label (default: text)

# CSS Parts

Name	Description
`label`

← Progress Ring Radio Group →