Corncob Design Language

Radio Buttons

Radio buttons are used to allow users to select a single option from a set. They can be used in forms, settings, and anywhere else where a single selection is needed. Corncob radio buttons are standard HTML radio buttons styled to fit the Corncob design system. They can be used in various states such as checked, unchecked, and disabled.

Default Radio Buttons

Group Label

Radio Button One

Radio Button Two

<fieldset class="corn-form--item corn-radio-button-group">
  <legend>Group Label</legend>
  <div class="corn-radio-button">
    <input type="radio" id="example1" name="example" checked />
    <label for="example1">Radio Button One</label>
  </div>
  <div class="corn-radio-button">
    <input type="radio" id="example2" name="example" />
    <label for="example2">Radio Button Two</label>
  </div>
</fieldset>

Disabled Radio Buttons

Group Label

Disabled Radio Button

<fieldset class="corn-form--item corn-radio-button-group">
  <legend>Group Label</legend>
  <div class="corn-radio-button">
    <input type="radio" id="example3" name="example-disabled" disabled />
    <label for="example3">Disabled Radio Button</label>
  </div>
  <div class="corn-radio-button">
    <input type="radio" id="example4" name="example-disabled" disabled checked />
    <label for="example4">Disabled Radio Button</label>
  </div>
</fieldset>

Inline Radio Buttons

Group Label

Inline Radio Button One

Inline Radio Button Two

<fieldset class="corn-form--item corn-radio-button-group corn-radio-button-group--inline">
  <legend>Group Label</legend>
  <div class="corn-radio-button">
    <input type="radio" id="example6" name="example-inline" checked />
    <label for="example6">Inline Radio Button One</label>
  </div>
  <div class="corn-radio-button">
    <input type="radio" id="example7" name="example-inline" />
    <label for="example7">Inline Radio Button Two</label>
  </div>
</fieldset>

Radio Button Tokens

:root {
  --cc-radio-button--input--background: var(--cc-form--item--color--background);
  --cc-radio-button--input--background--hover: var(--cc-form--item--color--background--hover);
  --cc-radio-button--input--background--checked: var(--cc-form--widget--background--selected);
  --cc-radio-button--input--background--checked--hover: var(
    --cc-form--widget--background--selected--hover
  );
  --cc-radio-button--input--border: var(--cc-form--item--border);
  --cc-radio-button--input--border-radius: var(--cc-border--radius--round);
  --cc-radio-button--input--color--checked: var(--cc-form--widget--color);
  --cc-radio-button--input--color--checked-hover: var(--cc-form--widget--color--hover);
  --cc-radio-button--input--border-color--checked: var(--cc-form--item--input--label--color);
  --cc-radio-button--input--border-color--checked-focus: var(--cc-form--item--input--label--color);
  --cc-radio-button--input--border-color--checked-active: var(--cc-form--item--input--label--color);
  --cc-radio-button--input--border-color--checked-hover: var(--cc-form--item--input--label--color);
  --cc-radio-button--input--focus-ring: var(--cc-form--item--focus-ring);
  --cc-radio-button--input--focus-ring--active: var(--cc-form--item--focus-ring--active);
  --cc-radio-button--input--color--text: var(--cc-form--item--color--text);
  --cc-radio-button--input--font-size--xs: var(--cc-form--item--font--size--xs);
  --cc-radio-button--input--font-size--sm: var(--cc-form--item--font--size--sm);
  --cc-radio-button--input--font-size--md: var(--cc-form--item--font--size--md);
  --cc-radio-button--input--font-size--lg: var(--cc-form--item--font--size--lg);
  --cc-radio-button--input--font-size--xl: var(--cc-form--item--font--size--xl);
  --cc-radio-button--input--size--xs: var(--cc-form--widget--size--xs);
  --cc-radio-button--input--size--sm: var(--cc-form--widget--size--sm);
  --cc-radio-button--input--size--md: var(--cc-form--widget--size--md);
  --cc-radio-button--input--size--lg: var(--cc-form--widget--size--lg);
  --cc-radio-button--input--size--xl: var(--cc-form--widget--size--xl);
}