Radio Card

<afp-radio-card>

stable

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

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

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad atque eveniet hic perferendis placeat quidem temporibus. At dolore et exercitationem molestias neque nostrum temporibus voluptas. Ab at nemo quo rem.

<afp-radio-card>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad atque eveniet hic perferendis placeat quidem temporibus. 
  At dolore et exercitationem molestias neque nostrum temporibus voluptas. Ab at nemo quo rem.
</afp-radio-card>

<afp-radio-card>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad atque eveniet hic perferendis placeat quidem temporibus. 
  At dolore et exercitationem molestias neque nostrum temporibus voluptas. Ab at nemo quo rem.
</afp-radio-card>

<AfpRadioCard>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad atque eveniet hic perferendis placeat quidem temporibus. 
  At dolore et exercitationem molestias neque nostrum temporibus voluptas. Ab at nemo quo rem.
</AfpRadioCard>

<AfpRadioCard>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad atque eveniet hic perferendis placeat quidem temporibus. 
  At dolore et exercitationem molestias neque nostrum temporibus voluptas. Ab at nemo quo rem.
</AfpRadioCard>

Examples #

Variants #

Use the variant attribute to set the radio card's variant.

Neutral

Brand

Accent

Info

Error

Success

Warning

<div class="afp-grid">
  <afp-radio-card variant="neutral">Neutral</afp-radio-card>
  <afp-radio-card variant="brand">Brand</afp-radio-card>
  <afp-radio-card variant="accent">Accent</afp-radio-card>
  <afp-radio-card variant="info">Info</afp-radio-card>
  <afp-radio-card variant="error">Error</afp-radio-card>
  <afp-radio-card variant="success">Success</afp-radio-card>
  <afp-radio-card variant="warning">Warning</afp-radio-card>
</div>

<div class="afp-grid">
  <afp-radio-card [variant]="'neutral'">Neutral</afp-radio-card>
  <afp-radio-card [variant]="'brand'">Brand</afp-radio-card>
  <afp-radio-card [variant]="'accent'">Accent</afp-radio-card>
  <afp-radio-card [variant]="'info'">Info</afp-radio-card>
  <afp-radio-card [variant]="'error'">Error</afp-radio-card>
  <afp-radio-card [variant]="'success'">Success</afp-radio-card>
  <afp-radio-card [variant]="'warning'">Warning</afp-radio-card>
</div>

<div class="afp-grid">
  <AfpRadioCard variant="neutral">Neutral</AfpRadioCard>
  <AfpRadioCard variant="brand">Brand</AfpRadioCard>
  <AfpRadioCard variant="accent">Accent</AfpRadioCard>
  <AfpRadioCard variant="info">Info</AfpRadioCard>
  <AfpRadioCard variant="error">Error</AfpRadioCard>
  <AfpRadioCard variant="success">Success</AfpRadioCard>
  <AfpRadioCard variant="warning">Warning</AfpRadioCard>
</div>

<div class="afp-grid">
  <AfpRadioCard :variant="'neutral'">Neutral</AfpRadioCard>
  <AfpRadioCard :variant="'brand'">Brand</AfpRadioCard>
  <AfpRadioCard :variant="'accent'">Accent</AfpRadioCard>
  <AfpRadioCard :variant="'info'">Info</AfpRadioCard>
  <AfpRadioCard :variant="'error'">Error</AfpRadioCard>
  <AfpRadioCard :variant="'success'">Success</AfpRadioCard>
  <AfpRadioCard :variant="'warning'">Warning</AfpRadioCard>
</div>

Sizes #

Use the size attribute to change the radios size

Small

Medium

Large

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

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

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

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

No Indicator #

Use the noIndicator (noindicator) attribute to determine whether the radio check should be displayed.

Radio card with no indicator

<afp-radio-card noindicator>Radio card with no indicator</afp-radio-card>

<afp-radio-card noindicator>Radio card with no indicator</afp-radio-card>

<AfpRadioCard noindicator>Radio card with no indicator</AfpRadioCard>

<AfpRadioCard noindicator>Radio card with no indicator</AfpRadioCard>

Hint #

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

<afp-radio-card 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-card>

<afp-radio-card [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-card>

<AfpRadioCard 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</AfpRadioCard>

<AfpRadioCard :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</AfpRadioCard>

Checked #

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

Checked Option

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

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

<AfpRadioCard checked>Checked Option</AfpRadioCard>

<AfpRadioCard checked>Checked Option</AfpRadioCard>

Disabled #

Use the disabled attribute to make a radio card unselectable.

Receive notifications(disabled)

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

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

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

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

Invalid #

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

Yes, send me updates

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

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

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

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

Properties

Learn more about properties.

Name Description Reflects

variant

variant of radio card

Type

AfpVariant

Name	Description
`NEUTRAL`	The main call-to-action.
`BRAND`	Less prominent than primary.
`ACCENT`	Secondary highlight for emphasis.
`ERROR`	Used for destructive or critical actions.
`INFO`	Conveys general information.
`SUCCESS`	Indicates a successful or positive action.
`WARNING`	Communicates cautionary actions.

AfpVariant

Default AfpVariant.NEUTRAL

noIndicator
noindicator

determines whether the radio card check indicator should be visible

Type boolean

Default false

checked

Whether the radio card is checked

Type boolean

Default false

value

The value associated with the radio card

Type string

group

The group name (shared among radio cards)

Type string

disabled

Whether the radio card is disabled

Type boolean

Default false

size

Size of the radio card

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 radio card 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 card

Type string

Default ''

Events

Learn more about events.

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

Slots

Learn more about slots.

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

Internationalization

Learn more about internationalization.

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

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)`
`content`	The content of the radio card.	`::part(content)`
`label`	The text label next to the control.	`::part(label)`

CSS Custom Properties

Name	Description	Default
`--afp-radio-card-tranform-scale`	The scale transform of the radio card from unchecked to checked.	`0.8`
`--afp-radio-card-disabled-opacity`	The opacity of the radio card when disabled.	`0.5`
`--afp-radio-card-color`	The color of the radio card when checked.	`--afp-color-neutral-fill-loud`
`--afp-radio-card-checked-shadow`	The shadow and its color displayed on the card when the radio card is selected.	`0 0 0 1px var(--variant-color-fill)`
`--afp-radio-card-padding`	The padding inside the radio card.	`--afp-space-m`
`--afp-input-error-border-color`	The border color of the radio card 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-card/radio-card.js';