Prose v1

Radio

Form element that allows users to select one option from a group of choices.

Class name Type
.prs-radio Component For <input>
.prs-radio-label Component For <label>
.prs-radio_focus State Manually apply visual focus

  • Default 

    <label class="prs-radio-label">
  <input type="radio" name="radio_group" class="prs-radio" aria-label="Radio" />
  <span class="prs-label-text">Label</span>
</label>
<label class="prs-radio-label">
  <input type="radio" name="radio_group" class="prs-radio" aria-label="Radio" checked />
  <span class="prs-label-text">Label</span>
</label>

  • Focus 

    <label class="prs-radio-label">
  <input type="radio" name="radio_group" class="prs-radio prs-radio_focus" aria-label="Radio" />
  <span class="prs-label-text">Label</span>
</label>
<label class="prs-radio-label">
  <input type="radio" name="radio_group" class="prs-radio prs-radio_focus" aria-label="Radio" checked />
  <span class="prs-label-text">Label</span>
</label>

  • Disabled 

    <label class="prs-radio-label">
  <input type="radio" name="radio_group" class="prs-radio" aria-label="Radio" disabled />
  <span class="prs-label-text">Label</span>
</label>
<label class="prs-radio-label">
  <input type="radio" name="radio_group" class="prs-radio" aria-label="Radio" checked disabled />
  <span class="prs-label-text">Label</span>
</label>

CSS

Full Library

Prose CSS Prose Tokens

Component Only

.prs-radio {
  appearance: none;
  border: 1px solid currentColor;
  width: 1rem;
  height: 1rem;
  color: var(--prs-c-gray-600);
  flex-shrink: 0;
  cursor: pointer;
  border-radius: 9999px;
  transition-property: var(--prs-transition-property);
  transition-timing-function: var(--prs-transition-timing);
  transition-duration: var(--prs-transition-duration);

  &:focus-visible {
    outline: 2px solid var(--prs-c-aqua);
    outline-offset: 1px;
  }

  &.prs-radio_focus {
    outline: 2px solid var(--prs-c-aqua);
    outline-offset: 1px;
  }

  &:checked {
    --chk-bg: var(--prs-c-aqua);
    --chk-fg: var(--prs-c-white);
    color: var(--chk-bg);
    background-color: var(--chk-fg);
    box-shadow: inset 0 0 0 4px currentColor, inset 0 0 0 4px currentColor;
  }

  &:disabled {
    background-color: var(--prs-c-gray-200);
    color: var(--prs-c-gray-400);
    cursor: not-allowed;
  }

  &:checked:disabled {
    border-color: var(--prs-c-gray-400);
    background-color: var(--prs-c-gray-400);
    color: var(--prs-c-gray-200);
  }
}

Figma

Coming soon...