Skip to main content

Radio

Auto-styled native radio buttons for single selection.

Selectors

input[type="radio"]
Auto-styled radio button within .cider scope.

Default

Notification preference
HTML 
<fieldset>
    <legend>Notification preference</legend>
    <label>
      <input type="radio" name="notification" value="all" checked />
      All notifications
    </label>
    <label>
      <input type="radio" name="notification" value="mentions" />
      Mentions only
    </label>
    <label>
      <input type="radio" name="notification" value="none" />
      None
    </label>
  </fieldset>

With Description

Spacing
HTML 
<fieldset>
    <legend>Spacing</legend>
    <label>
      <input type="radio" name="spacing" value="default" checked />
      <span>Default</span>
      <small>Standard spacing that works for most use cases.</small>
    </label>
    <label>
      <input type="radio" name="spacing" value="comfortable" />
      <span>Comfortable</span>
      <small>More breathing room between elements.</small>
    </label>
    <label>
      <input type="radio" name="spacing" value="compact" />
      <span>Compact</span>
      <small>Reduced spacing for dense interfaces.</small>
    </label>
  </fieldset>

Disabled

Status
HTML 
<fieldset>
    <legend>Status</legend>
    <label>
      <input type="radio" name="status" value="active" checked disabled />
      Active (locked)
    </label>
    <label>
      <input type="radio" name="status" value="pending" disabled />
      Pending (unavailable)
    </label>
    <label>
      <input type="radio" name="status" value="archived" />
      Archived
    </label>
  </fieldset>