Radio

<afp-radio>

stable

This component uses the light DOM, so its markup and styles are part of the regular document flow.

The Radio component allows users to select a single option from a set of choices. It is typically used in groups where only one radio button can be selected at a time.

Radio

<afp-radio>Radio</afp-radio>

<afp-radio>Radio</afp-radio>

<AfpRadio>Radio</AfpRadio>

<AfpRadio>Radio</AfpRadio>

Examples #

Sizes #

Use the size attribute to change the radios size.

Small

Medium

Large

<div class="afp-cluster afp-align-center">
<afp-radio name="group1" size="small">Small</afp-radio>
<afp-radio name="group1" size="medium">Medium</afp-radio>
<afp-radio name="group1" size="large">Large</afp-radio>
</div>

<div class="afp-cluster afp-align-center">
<afp-radio [name]="'group1'" [size]="'small'">Small</afp-radio>
<afp-radio [name]="'group1'" [size]="'medium'">Medium</afp-radio>
<afp-radio [name]="'group1'" [size]="'large'">Large</afp-radio>
</div>

<div class="afp-cluster afp-align-center">
<AfpRadio name="group1" size="small">Small</AfpRadio>
<AfpRadio name="group1" size="medium">Medium</AfpRadio>
<AfpRadio name="group1" size="large">Large</AfpRadio>
</div>

<div class="afp-cluster afp-align-center">
<AfpRadio :name="'group1'" :size="'small'">Small</AfpRadio>
<AfpRadio :name="'group1'" :size="'medium'">Medium</AfpRadio>
<AfpRadio :name="'group1'" :size="'large'">Large</AfpRadio>
</div>

Hint #

Use the hint attribute to provide additional information below the radio.

<afp-radio hint="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua">Accept</afp-radio>

<afp-radio [hint]="'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua'">Accept</afp-radio>

<AfpRadio hint="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua">Accept</AfpRadio>

<AfpRadio :hint="'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua'">Accept</AfpRadio>

Checked #

Use the checked attribute to render a radio in the checked state.

Checked Option

<afp-radio checked>Checked Option</afp-radio>

<afp-radio checked>Checked Option</afp-radio>

<AfpRadio checked>Checked Option</AfpRadio>

<AfpRadio checked>Checked Option</AfpRadio>

Disabled #

Use the disabled attribute to make a radio unselectable.

Receive notifications (disabled)

<afp-radio disabled>Receive notifications (disabled)</afp-radio>

<afp-radio disabled>Receive notifications (disabled)</afp-radio>

<AfpRadio disabled>Receive notifications (disabled)</AfpRadio>

<AfpRadio disabled>Receive notifications (disabled)</AfpRadio>

Invalid #

Use the invalid attribute to display an error message and style the radio accordingly.

Yes, send me updates

<afp-radio invalid="Please select an option">
  Yes, send me updates
</afp-radio>

<afp-radio [invalid]="'Please select an option'">
  Yes, send me updates
</afp-radio>

<AfpRadio invalid="Please select an option">
  Yes, send me updates
</AfpRadio>

<AfpRadio :invalid="'Please select an option'">
  Yes, send me updates
</AfpRadio>

Custom Icons #

Use the checked-icon slot to provide custom icons for the checked state.

Custom Icon

<afp-radio>
  <afp-icon slot="checked-icon" name="x-lg"></afp-icon>
  Custom Icon
</afp-radio>

<afp-radio>
  <afp-icon [slot]="'checked-icon'" [name]="'x-lg'"></afp-icon>
  Custom Icon
</afp-radio>

<AfpRadio>
  <AfpIcon slot="checked-icon" name="x-lg"></AfpIcon>
  Custom Icon
</AfpRadio>

<AfpRadio>
  <AfpIcon :slot="'checked-icon'" :name="'x-lg'"></AfpIcon>
  Custom Icon
</AfpRadio>

Customization #

Use the --afp-radio-control-color CSS variable to customize the checked radio color.

Custom Color

<afp-radio style="--afp-radio-control-color: deeppink">
  Custom Color
</afp-radio>

<afp-radio [style]="'--afp-radio-control-color: deeppink'">
  Custom Color
</afp-radio>

<AfpRadio style="--afp-radio-control-color: deeppink">
  Custom Color
</AfpRadio>

<AfpRadio :style="'--afp-radio-control-color: deeppink'">
  Custom Color
</AfpRadio>

Properties

Learn more about properties.

Name Description Reflects

checked

Whether the radio is checked

Type boolean

Default false

value

The value associated with the radio

Type string

group

The group name (shared among radios)

Type string

disabled

Whether the radio is disabled

Type boolean

Default false

size

size of the radio.

Type

AfpSize

Name	Description
`SMALL`	Small size with compact dimensions.
`MEDIUM`	Medium size with standard dimensions.
`LARGE`	Large size with expanded dimensions.

AfpSize

Default AfpSize.MEDIUM

invalid

Error message shown below the checkbox when present. Sets `aria-invalid`. Provide a non-empty string to put the component in an error state.

Type string

hint

Optional hint message below the radio

Type string

Default ''

Events

Learn more about events.

Name	Return	Description
`afp-value-changed`	`{ value: number \| string \| undefined; checked: boolean }`	Fired when the radio is selected.
`afp-change`	`string`	Fired when the checked state changes.
`afp-focus`	`void`	Fired when the radio gains focus.
`afp-blur`	`void`	Fired when the radio loses focus.

Slots

Learn more about slots.

Name	Description
`default`	The label content of the radio button.
`checked-icon`	The icon to display inside the selected radio.

Internationalization

Learn more about internationalization.

Key	Description
`radio.aria-label`	The default `aria-label` text for radio.

CSS Parts

Learn more about CSS Parts.

Name	Description	Selector
`base`	The outer wrapper of the radio.	`::part(base)`
`input`	The internal `<input>` element.	`::part(input)`
`control`	The visual control (the circle).	`::part(control)`
`checked-icon`	The icon shown when the radio is checked.	`::part(checked-icon)`
`invalid`	The error message text.	`::part(invalid)`
`hint`	The hint message text.	`::part(hint)`
`label`	The text label next to the control.	`::part(label)`

CSS Custom Properties

Name	Description	Default
`--afp-radio-disabled-opacity`	The opacity of the radio when disabled.	`0.5`
`--afp-radio-control-color`	The color of the radio when checked	`--afp-color-neutral-fill-loud`
`--afp-radio-tranform-scale`	The scale transform of the radio from unchecked to checked.	`0.8`
`--afp-input-error-border-color`	The border color of the radio control in the invalid/error state.	`--afp-color-error-500`

Dependencies

The component automatically brings in the listed items, including any nested dependencies that may exist.

afp-icon

Importing

Using the bundle is the recommended method to include components. If you’d rather handle imports manually, you can use the code examples below.

import '@afp-design-system/core/dist/components/radio/radio.js';