Radio group

a single choice from a small set of options; the group coordinates its radios and roving focus.

Example

<div class="lucent-radio-group" role="radiogroup" aria-label="Plan">
  <label class="lucent-radio lucent-radio--md">
    <input type="radio" class="lucent-radio__input" name="rg-21" value="free" />
    <span class="lucent-radio__circle">
    </span>
    <span class="lucent-radio__label">Free</span>
  </label>
  <label class="lucent-radio lucent-radio--md">
    <input type="radio" class="lucent-radio__input" name="rg-21" value="standard" checked />
    <span class="lucent-radio__circle">
    </span>
    <span class="lucent-radio__label">Standard</span>
  </label>
  <label class="lucent-radio lucent-radio--md">
    <input type="radio" class="lucent-radio__input" name="rg-21" value="pro" />
    <span class="lucent-radio__circle">
    </span>
    <span class="lucent-radio__label">Pro</span>
  </label>
</div>

Using it

Angular lucent-radio-group, lucent-radio
import { LucentRadioGroup, LucentRadio } from '@design-foundry/lucent-angular';
Stylesheet .lucent-radio
@design-foundry/lucent-styles/core.css

API

NameKindTypeDefaultDescription
radio-group label input string '' accessible group name.
radio-group size input xs | sm | md | lg md control density for every radio.
radio value input T this option’s value.
radio label input string '' option label.
radio size input xs | sm | md | lg overrides the group size.
radio disabled input boolean false disables this option.

Theming

Color (9)
Size & spacing (6)
Border & radius (2)
Type (2)