{{#> web/layout/default title="Radio" parentPageName="Components" }}

<section class="UNSTABLE_Section">

  <div class="Container">

    <h2 class="docs-Heading">Default</h2>

    <div class="docs-Stack docs-Stack--start">

      <label for="radio-default" class="Radio">
        <input type="radio" id="radio-default" class="Radio__input" name="default" />
        <span class="Radio__text">
          <span class="Radio__label">Radio Label</span>
        </span>
      </label>

      <label for="radio-default-checked" class="Radio">
        <input type="radio" id="radio-default-checked" class="Radio__input" name="default" checked />
        <span class="Radio__text">
          <span class="Radio__label">Radio Label</span>
        </span>
      </label>

    </div>

  </div>

</section>

<section class="UNSTABLE_Section">

  <div class="Container">

    <h2 class="docs-Heading">Hidden Label</h2>

    <div class="docs-Stack docs-Stack--start">

      <label for="radio-hidden-label" class="Radio">
        <input type="radio" id="radio-hidden-label" class="Radio__input" name="hiddenLabel" />
        <span class="Radio__text">
          <span class="Radio__label Radio__label--hidden">Radio Label</span>
        </span>
      </label>

    </div>

  </div>

</section>

<section class="UNSTABLE_Section">

  <div class="Container">

    <h2 class="docs-Heading">Helper Text</h2>

    <div class="docs-Stack docs-Stack--start">

      <label for="radio-helper-text" class="Radio">
        <input type="radio" id="radio-helper-text" class="Radio__input" name="helperText" />
        <span class="Radio__text">
          <span class="Radio__label">Radio Label</span>
          <span class="Radio__helperText">Helper text</span>
        </span>
      </label>

    </div>

  </div>

</section>

<section class="UNSTABLE_Section">

  <div class="Container">

    <h2 class="docs-Heading">Disabled</h2>

    <div class="docs-Stack docs-Stack--start">

      <label for="radio-disabled" class="Radio Radio--disabled">
        <input type="radio" id="radio-disabled" class="Radio__input" name="disabled" disabled />
        <span class="Radio__text">
          <span class="Radio__label">Radio Label</span>
        </span>
      </label>

      <label for="radio-disabled-helper-text" class="Radio Radio--disabled">
        <input type="radio" id="radio-disabled-helper-text" class="Radio__input" name="disabledHelperText" disabled checked />
        <span class="Radio__text">
          <span class="Radio__label">Radio Label</span>
          <span class="Radio__helperText">Helper text</span>
        </span>
      </label>

    </div>

  </div>

</section>

<section class="UNSTABLE_Section">

  <div class="Container">

    <h2 class="docs-Heading">Validation State</h2>

    <div class="docs-Stack docs-Stack--start">

      <label for="radio-success" class="Radio Radio--success">
        <input type="radio" id="radio-success" class="Radio__input" name="validation" />
        <span class="Radio__text">
          <span class="Radio__label">Radio Label</span>
        </span>
      </label>

      <label for="radio-warning" class="Radio Radio--warning">
        <input type="radio" id="radio-warning" class="Radio__input" name="validation" />
        <span class="Radio__text">
          <span class="Radio__label">Radio Label</span>
        </span>
      </label>

      <label for="radio-danger" class="Radio Radio--danger">
        <input type="radio" id="radio-danger" class="Radio__input" name="validation" />
        <span class="Radio__text">
          <span class="Radio__label">Radio Label</span>
        </span>
      </label>

      <label for="radio-warning-helper-text" class="Radio Radio--warning">
        <input type="radio" id="radio-warning-helper-text" class="Radio__input" name="validation" checked />
        <span class="Radio__text">
          <span class="Radio__label">Radio Label</span>
          <span class="Radio__helperText">Helper text</span>
        </span>
      </label>

    </div>

  </div>

</section>

<section class="UNSTABLE_Section">

  <div class="Container">

    <h2 class="docs-Heading">Item</h2>

    <div class="docs-Stack docs-Stack--start">

      <label for="radio-item-default" class="Radio Radio--item">
        <input type="radio" id="radio-item-default" class="Radio__input" name="item" />
        <span class="Radio__text">
          <span class="Radio__label">Radio Label</span>
        </span>
      </label>

      <label for="radio-item-default-checked" class="Radio Radio--item">
        <input type="radio" id="radio-item-default-checked" class="Radio__input" name="item" checked />
        <span class="Radio__text">
          <span class="Radio__label">Radio Label</span>
        </span>
      </label>

      <label for="radio-item-helper-text" class="Radio Radio--item">
        <input type="radio" id="radio-item-helper-text" class="Radio__input" name="item" />
        <span class="Radio__text">
          <span class="Radio__label">Radio Label</span>
          <span class="Radio__helperText">Helper text</span>
        </span>
      </label>

      <label for="radio-item-disabled" class="Radio Radio--item Radio--disabled">
        <input type="radio" id="radio-item-disabled" class="Radio__input" name="itemDisabled" disabled />
          <span class="Radio__text">
          <span class="Radio__label">Radio Label</span>
        </span>
      </label>

      <label for="radio-item-disabled-helper-text" class="Radio Radio--item Radio--disabled">
        <input
          type="radio"
          id="radio-item-disabled-helper-text"
          class="Radio__input"
          name="itemDisabled"
          disabled
          checked
        />
        <span class="Radio__text">
          <span class="Radio__label">Radio Label</span>
          <span class="Radio__helperText">Helper text</span>
        </span>
      </label>

    </div>

  </div>

</section>

{{/web/layout/default }}