shared/components/forms/FormElements2.astro - dev - githubmirror/tabler

shared/components/forms/FormElements2.astro
118 строк5 KB
Paweł Kuna
Improve accessibility across layouts, components, and forms (#2799)
06 авг 2026, 00:40
06 авг 2026, 00:401effe22
---
import Icon from '@ui/Icon.astro'
import FormGroup from '@ui/FormGroup.astro'
import InputGroup from '@ui/InputGroup.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" for="fe2-form-control-flush">
  <input type="text" class="form-control form-control-flush" id="fe2-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" for="fe2-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" id="fe2-prepended-text" value="yourfancyusername" autocomplete="off" />
  </div>
</FormGroup>

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

<FormGroup label="Input with appended link" for="fe2-appended-link">
  <InputGroup type="password" id="fe2-appended-link" value="ultrastrongpassword" flat appendButton={[{ icon: 'eye', description: 'Show password' }]} />
</FormGroup>

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

<FormGroup label="Input with appended icon links" for="fe2-appended-icon-links">
  <div class="input-group input-group-flat">
    <input type="text" class="form-control" id="fe2-appended-icon-links" autocomplete="off" />
    <span class="input-group-text">
      <button type="button" class="link-secondary border-0 bg-transparent p-0" title="Clear search" aria-label="Clear search" data-bs-toggle="tooltip">
        <Icon name="x" />
      </button>
      <button type="button" class="link-secondary ms-2 border-0 bg-transparent p-0" title="Search settings" aria-label="Search settings" data-bs-toggle="tooltip">
        <Icon name="adjustments" />
      </button>
      <button type="button" class="link-secondary ms-2 border-0 bg-transparent p-0" title="Add notification" aria-label="Add notification" data-bs-toggle="tooltip" disabled>
        <Icon name="bell" />
      </button>
    </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>