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

shared/components/forms/FormElements6.astro
82 строки3 KB
Paweł Kuna
Improve accessibility across layouts, components, and forms (#2799)
06 авг 2026, 00:40
06 авг 2026, 00:401effe22
---
// (noUiSlider), datepickers, progress bars, form buttons, and TomSelect variants.
import flags from '@data/flags.json'
import FormGroup from '@ui/FormGroup.astro'
import Range from '@ui/Range.astro'
import Datepicker from '@ui/Datepicker.astro'
import Progress from '@ui/Progress.astro'
import Button from '@ui/Button.astro'
import Select from '@ui/Select.astro'

const datalistCountries = (flags as { name: string }[]).slice(0, 10)
---

<FormGroup label="Datalist example" for="fe6-datalist">
  <input class="form-control" id="fe6-datalist" list="datalistOptions" placeholder="Type to search..." />
  <datalist id="datalistOptions">
    {datalistCountries.map((country) => <option value={country.name} />)}
  </datalist>
</FormGroup>

<FormGroup label="Range input">
  <Range value={40} />
  <Range value="20" id="simple" connect />
  <Range value="60,90" id="connect" />
  <Range value="40" id="color" class="text-green" connect />
</FormGroup>

<FormGroup label="Datepicker">
  <Datepicker id="default" class="mb-2" />
  <Datepicker id="icon" layout="icon" class="mb-2" />
  <Datepicker id="icon-prepend" layout="icon-prepend" />
</FormGroup>

{/* Inline datepicker renders a calendar div (`datepicker-inline`), not a labelable input — `for` intentionally skipped, same as Range. */}
<FormGroup label="Inline datepicker">
  <Datepicker id="inline" inline />
</FormGroup>

<FormGroup label="Progress">
  <Progress class="mb-2" />
  <Progress indeterminate color="green" />
</FormGroup>

<FormGroup label="Form buttons">
  <div class="row">
    <div class="col">
      <Button block icon="brand-github" iconColor="github" text="Login with Github" />
    </div>
    <div class="col">
      <Button block icon="brand-x" iconColor="x" text="Login with X" />
    </div>
  </div>
</FormGroup>

<FormGroup label="Tags input" for="select-fe6-tags">
  <Select id="fe6-tags" key="tags" placeholder="Select tags" />
</FormGroup>

<FormGroup label="Advanced select" for="select-fe6-advanced-select">
  <Select id="fe6-advanced-select" key="users" />
</FormGroup>

<FormGroup label="Advanced select with optgroup" for="select-fe6-select-optgroup">
  <Select id="fe6-select-optgroup" key="optgroups" />
</FormGroup>

<FormGroup label="Select with avatars" for="select-fe6-select-avatars">
  <Select id="fe6-select-avatars" key="people" indicator="avatar" />
</FormGroup>

<FormGroup label="Select with flags" for="select-fe6-select-flags">
  <Select id="fe6-select-flags" key="countries" indicator="flag" />
</FormGroup>

<FormGroup label="Select with labels" for="select-fe6-select-labels">
  <Select id="fe6-select-labels" key="labels" indicator="label" />
</FormGroup>

<FormGroup label="Advanced select with validation state">
  <Select id="countries-valid" key="countries" state="valid" class="mb-3" />
  <Select id="countries-invalid" key="countries" state="invalid" />
</FormGroup>