Prism Docs

Radio

A radio input component.

Basic Usage

The most basic usage of a radio group.

Selected: apple
<prism-radio-group [(value)]="selectedValue">
  <prism-radio value="apple">Apple</prism-radio>
  <prism-radio value="banana">Banana</prism-radio>
  <prism-radio value="cherry">Cherry</prism-radio>
</prism-radio-group>

Direction

Radio groups can be displayed vertically by setting direction='vertical'.

<prism-radio-group direction="vertical" [(value)]="selectedValue">
  <prism-radio value="apple">Apple</prism-radio>
  <prism-radio value="banana">Banana</prism-radio>
  <prism-radio value="cherry">Cherry</prism-radio>
</prism-radio-group>

Disabled Group

Disable the entire radio group by setting [disabled]='true'.

<prism-radio-group [disabled]="true" [value]="'apple'">
  <prism-radio value="apple">Apple</prism-radio>
  <prism-radio value="banana">Banana</prism-radio>
</prism-radio-group>

Disabled Option

Disable individual radio options by setting [disabled]='true' on the prism-radio component.

<prism-radio-group [value]="'banana'">
  <prism-radio value="apple" [disabled]="true">Apple (Disabled)</prism-radio>
  <prism-radio value="banana">Banana (Active)</prism-radio>
</prism-radio-group>