Text input

<div class="chi-form__item">
  <chi-label for="example__base">Label</chi-label>
  <chi-text-input id="example__base"></chi-text-input>
</div>

<div class="chi-form__item">
  <chi-label for="example__disabled">Label</chi-label>
  <chi-text-input id="example__disabled" value="Sample Text" disabled></chi-text-input>
</div>

<div class="chi-form__item">
  <chi-label for="example__readonly">Label</chi-label>
  <chi-text-input id="example__readonly" value="Sample Text" readonly></chi-text-input>
</div>

<div class="chi-form__item">
  <chi-label for="example__placeholder">Label</chi-label>
  <chi-text-input id="example__placeholder" placeholder="Placeholder"></chi-text-input>
</div>

<div class="chi-form__item">
  <chi-label for="example__spinner">Label</chi-label>
  <chi-text-input id="example__spinner" spinner></chi-text-input>
</div>

<div class="chi-form__item">
  <chi-label for="example__required" required>Label</chi-label>
  <chi-text-input id="example__required" required></chi-text-input>
</div>

<div class="chi-form__item">
  <chi-label for="example__optional" optional>Label</chi-label>
  <chi-text-input id="example__optional"></chi-text-input>
</div>

<div class="chi-form__item">
  <div class="chi-label__wrapper">
    <chi-label for="example__label-with-icon">Label</chi-label>
    <div class="chi-label__help">
      <chi-button id="example__help-button" type="icon" size="xs" variant="flat" alternative-text="Help">
        <chi-icon icon="circle-info-outline"></chi-icon>
      </chi-button>
      <chi-popover id="example__help-popover" position="top" variant="text" arrow reference="#example__help-button">
        Helpful information goes here.
      </chi-popover>
    </div>
  </div>
  <chi-text-input id="example__label-with-icon"></chi-text-input>
</div>

<script>
  document.querySelector("#example__help-button")
    .addEventListener("click", function() {
      var popoverElem = document.querySelector("#example__help-popover");
      popoverElem.toggle();
    });
</script>

<div class="chi-form__item">
  <chi-label for="example__message">Label</chi-label>
  <chi-text-input id="example__message"></chi-text-input>
  <div class="chi-label -status">Optional input message</div>
</div>

<div class="chi-form__item">
  <chi-label for="example__danger">Name</chi-label>
  <chi-text-input id="example__danger" state="danger"></chi-text-input>
  <div class="chi-label -status -danger">
    <chi-icon icon="circle-warning"></chi-icon>
    Please enter a name.
  </div>
</div>

<div class="chi-form__item -row">
  <chi-label for="example__inline-label">Label</chi-label>
  <chi-text-input id="example__inline-label"></chi-text-input>
</div>

<div class="chi-form__item -row">
  <chi-label class="-w--50" for="example__inline-label-percent">Label width 50%</chi-label>
  <div class="-w--50">
    <chi-text-input id="example__inline-label-percent"></chi-text-input>
  </div>
</div>

<div class="chi-form__item -row chi-grid -no-gutter">
  <chi-label class="chi-col -w--3" for="example__inline-label-grid">Label width 3 columns</chi-label>
  <chi-text-input class="chi-col -w--9" id="example__inline-label-grid"></chi-text-input>
</div>

<div class="-d--flex">
  <div class="chi-form__item -inline -flex--grow1">
    <chi-label for="example__inline-input01">Label</chi-label>
    <chi-text-input id="example__inline-input01"></chi-text-input>
  </div>
  <div class="chi-form__item -inline -flex--grow1">
    <chi-label for="example__inline-input02">Label</chi-label>
    <chi-text-input id="example__inline-input02"></chi-text-input>
  </div>
</div>

<div class="chi-input__wrapper -floating-label">
  <input class="chi-input -md" type="text" id="floating-label-md">
  <label for="floating-label-md">Placeholder text</label>
</div>

<div class="chi-input__wrapper -floating-label">
  <input class="chi-input -lg" type="text" id="floating-label-lg">
  <label for="floating-label-lg">Placeholder text</label>
</div>

<div class="chi-input__wrapper -floating-label">
  <input class="chi-input -xl" type="text" id="floating-label-xl">
  <label for="floating-label-xl">Placeholder text</label>
</div>

<script>
  chi.floatingLabel(document.querySelectorAll('.-floating-label'));
</script>