tabler/shared/components/forms/FormElements2.astro

---
import Icon from '@ui/Icon.astro'
import FormGroup from '@ui/FormGroup.astro'
---

<FormGroup label="Form control rounded">
  <input type="text" class="form-control form-control-rounded mb-2" name="Form control rounded" placeholder="Text.." />

  <div class="input-icon">
    <input type="text" value="" class="form-control form-control-rounded" placeholder="Search…" />
    <span class="input-icon-addon">
      <Icon name="search" />
    </span>
  </div>
</FormGroup>

<FormGroup label="Form control flush">
  <input type="text" class="form-control form-control-flush" name="Form control flush" placeholder="Text.." />
</FormGroup>

<FormGroup label="Input group">
  <div class="input-group mb-2">
    <span class="input-group-text">@</span>
    <input type="text" class="form-control" placeholder="username" autocomplete="off" />
  </div>

  <div class="input-group mb-2">
    <input type="text" class="form-control" placeholder="subdomain" autocomplete="off" />
    <span class="input-group-text">.tabler.io</span>
  </div>

  <div class="input-group">
    <span class="input-group-text">https://</span>
    <input type="text" class="form-control" placeholder="subdomain" autocomplete="off" />
    <span class="input-group-text">.tabler.io</span>
  </div>
</FormGroup>

<FormGroup label="Input with checkbox or radios">
  <div class="input-group mb-2">
    <span class="input-group-text">
      <input class="form-check-input m-0" type="checkbox" checked />
    </span>
    <input type="text" class="form-control" autocomplete="off" />
  </div>

  <div class="input-group">
    <input type="text" class="form-control" autocomplete="off" />
    <span class="input-group-text">
      <input class="form-check-input m-0" type="radio" checked />
    </span>
  </div>
</FormGroup>

<FormGroup label="Input with prepended text">
  <div class="input-group input-group-flat">
    <span class="input-group-text">https://tabler.io/users/</span>
    <input type="text" class="form-control ps-0" value="yourfancyusername" autocomplete="off" />
  </div>
</FormGroup>

<FormGroup label="Input with appended text">
  <div class="input-group input-group-flat">
    <input type="text" class="form-control text-end pe-0" value="yourfancydomain" autocomplete="off" />
    <span class="input-group-text">.tabler.io</span>
  </div>
</FormGroup>

<FormGroup label="Input with appended link">
  <div class="input-group input-group-flat">
    <input type="password" class="form-control" value="ultrastrongpassword" autocomplete="off" />
    <span class="input-group-text">
      <a href="#" class="input-group-link">Show password</a>
    </span>
  </div>
</FormGroup>

<FormGroup label="Input with appended kbd">
  <div class="input-group input-group-flat">
    <input type="text" class="form-control" autocomplete="off" />
    <span class="input-group-text">
      <kbd>ctrl + K</kbd>
    </span>
  </div>
</FormGroup>

<FormGroup label="Input with appended icon links">
  <div class="input-group input-group-flat">
    <input type="text" class="form-control" autocomplete="off" />
    <span class="input-group-text">
      <a href="#" class="link-secondary" title="Clear search" data-bs-toggle="tooltip"><Icon name="x" /></a>
      <a href="#" class="link-secondary ms-2" title="Search settings" data-bs-toggle="tooltip"><Icon name="adjustments" /></a>
      <a href="#" class="link-secondary ms-2 disabled" title="Add notification" data-bs-toggle="tooltip"><Icon name="bell" /></a>
    </span>
  </div>
</FormGroup>

<FormGroup label="Floating inputs">
  <div class="form-floating mb-3">
    <input type="email" class="form-control" id="floating-input" value="name@example.com" autocomplete="off" />
    <label for="floating-input">Email address</label>
  </div>
  <div class="form-floating mb-3">
    <input type="password" class="form-control" id="floating-password" value="Password" autocomplete="off" />
    <label for="floating-password">Password</label>
  </div>
  <div class="form-floating">
    <select class="form-select" id="floatingSelect" aria-label="Floating label select example">
      <option selected>Open this select menu</option>
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
    </select>
    <label for="floatingSelect">Select</label>
  </div>
</FormGroup>