Radio

Single radio button component.

Figma component (opens in new tab)Storybook documentation (opens in new tab)

Radio

React

<Radio name="radio" id="radio_1" value="1" label="Radio" />

CSS

<div class="radio">
  <input type="radio" name="radio" id="radio_1" value="1" class="radio_control" />
  <label for="radio_1" class="radio_label">Radio</label>
</div>

Props

Checked

Checked

React

<Radio name="checked" id="checked_1" value="1" label="Checked" checked />

CSS

<div class="radio">
  <input type="radio" name="checked" id="checked_1" value="1" class="radio_control" checked />
  <label for="checked_1" class="radio_label">Radio</label>
</div>

Disabled

Disabled

React

<Radio name="disabled" id="disabled_1" value="1" label="Disabled" disabled />

CSS

<div class="radio">
  <input type="radio" name="disabled" id="disabled_1" value="1" class="radio_control" disabled />
  <label for="disabled_1" class="radio_label">Radio</label>
</div>

Dense

Reduce the font size and radio size for a more compact appearance.

Dense

React

<Radio name="dense" id="dense_1" value="1" label="Dense" dense />

CSS

<div class="radio radio-dense">
  <input type="radio" name="dense" id="dense_1" value="1" class="radio_control" />
  <label for="dense_1" class="radio_label">Dense</label>
</div>