---
title: Radio
desc: Form element that allows users to select one option from a group of choices.
ico: mdi:radiobox-marked
keywords:
  - form
  - group
  - input

props:
  - class: .prs-radio
    type: component
    desc: For <input>
  - class: .prs-radio-label
    type: component
    desc: For <label>
  - class: .prs-radio_focus
    type: state
    desc: Manually apply visual focus

controls:
  - name: label
    type: text
    label: Label
    desc: As always, keep it simple.
    default: Label

  - name: size
    type: radio
    label: Size
    desc: Optional sizes.
    default: default
    options:
      - default
      - lg
      - xl

  - name: checked
    type: toggle
    label: Checked
    desc: Default state or checked state.
    default: false

  - name: state
    type: radio
    label: State
    desc: States will happen automatically when using valid markup. We do include a class to force focused state, but you should avoid using it in your application.
    default: default
    options:
      - default
      - focus
      - disabled

preview: |
  <label class="prs-radio-label max-w-sm">
    <input
      type="radio"
      name="radio-1"
      class="prs-radio"
      @click="checked ? checked = !checked : checked = $event.target.checked"
      @change="checked = $event.target.checked"
      :checked="checked"
      :class="{
        'prs-radio-lg': size === 'lg',
        'prs-radio-xl': size === 'xl',
        'prs-radio_focus': state === 'focus',
      }"
      :disabled="state === 'disabled'" />
    <span x-text="label ? label : 'Label'" class="prs-label-text"></span>
  </label>

code:
  html: |
    <label class="prs-radio-label">
      <input type="radio" class="prs-radio{size}{focused}"{checked}{disabled} />
      <span class="prs-label-text">{label}</span>
    </label>
  logic:
    label: "this.label ? this.label : ''"
    size: "this.size !== 'default' ? ' prs-radio-'+ this.size : ''"
    checked: "this.checked ? ' checked' : ''"
    focused: "this.state === 'focus' ? ' prs-radio_focus' : ''"
    disabled: "this.state === 'disabled' ? ' disabled' : ''"
---