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

shared/components/forms/FormElements1.astro
184 строки7 KB
Paweł Kuna
Improve accessibility across layouts, components, and forms (#2799)
06 авг 2026, 00:40
06 авг 2026, 00:401effe22
---
// Static inputs, plain selects, a TomSelect "states" multi-select, input groups
// with dropdowns, icon/loader/separated inputs, and a help-icon input.
// TomSelect init for #select-states — FIRST page script, matching the reference
// order (select-states precedes the FormElements6 scripts).
import Icon from '@ui/Icon.astro'
import FormGroup from '@ui/FormGroup.astro'
import selects from '@data/selects.json'
import CaptureScript from '../CaptureScript.astro'

const states = (selects as { states: { options: Record<string, { name: string; selected?: boolean }> } }).states.options
---

<FormGroup label="Static">
  <div class="form-control-plaintext">Input value</div>
</FormGroup>

<FormGroup label="Text" for="fe1-text">
  <input type="text" class="form-control" id="fe1-text" name="example-text-input" placeholder="Input placeholder" />
</FormGroup>

<FormGroup label="Password" for="fe1-password">
  <input type="text" class="form-control" id="fe1-password" name="example-password-input" placeholder="Input placeholder" />
</FormGroup>

<FormGroup label="Disabled" for="fe1-disabled">
  <input type="text" class="form-control" id="fe1-disabled" name="example-disabled-input" placeholder="Disabled..." value="Well, she turned me into a newt." disabled />
</FormGroup>
<FormGroup label="Readonly" for="fe1-readonly">
  <input type="text" class="form-control" id="fe1-readonly" name="example-disabled-input" placeholder="Readonly..." value="Well, how'd you become king, then?" readonly />
</FormGroup>
<FormGroup label="Required" required for="fe1-required">
  <input type="text" class="form-control" id="fe1-required" name="example-required-input" placeholder="Required..." aria-required="true" />
</FormGroup>
<FormGroup label="Textarea" description="56/100" for="fe1-textarea">
  <textarea class="form-control" id="fe1-textarea" name="example-textarea-input" rows="6" placeholder="Content..">Oh! Come and see the violence inherent in the system! Help, help, I'm being repressed! We shall say 'Ni' again to you, if you do not appease us. I'm not a witch. I'm not a witch. Camelot!</textarea>
</FormGroup>

<div class="mb-3">
  <div class="form-label">Select</div>
  <select class="form-select">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>
</div>

<div class="mb-3">
  <div class="form-label">Select multiple</div>
  <select class="form-select" multiple>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>
</div>

<div class="mb-3">
  <div class="form-label">Select multiple states</div>
  <select class="form-select" id="select-states" value="" multiple>
    {
      Object.entries(states).map(([code, { name, selected }]) => (
        <option value={code} selected={selected}>
          {name}
        </option>
      ))
    }
  </select>
</div>

<FormGroup label="Input group">
  <div class="input-group mb-2">
    <input type="text" class="form-control" placeholder="Search for…" />
    <button class="btn" type="button">Go!</button>
  </div>
  <div class="input-group">
    <button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Action </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#"> Action </a>
      <a class="dropdown-item" href="#"> Another action </a>
    </div>
    <input type="text" class="form-control" aria-label="Text input with dropdown button" />
  </div>
</FormGroup>
<FormGroup label="Input group buttons" for="fe1-input-group-buttons">
  <div class="input-group">
    <input type="text" class="form-control" id="fe1-input-group-buttons" />
    <button type="button" class="btn">Action</button>
    <button data-bs-toggle="dropdown" type="button" class="btn dropdown-toggle dropdown-toggle-split"></button>
    <div class="dropdown-menu dropdown-menu-end">
      <a class="dropdown-item" href="#"> Action </a>
      <a class="dropdown-item" href="#"> Another action </a>
    </div>
  </div>
</FormGroup>

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

<FormGroup label="Loader input">
  <div class="input-icon mb-3">
    <input type="text" value="" class="form-control" placeholder="Loading…" />
    <span class="input-icon-addon">
      <div class="spinner-border spinner-border-sm text-secondary" role="status"></div>
    </span>
  </div>
  <div class="input-icon mb-3">
    <span class="input-icon-addon">
      <div class="spinner-border spinner-border-sm text-secondary" role="status"></div>
    </span>
    <input type="text" value="" class="form-control" placeholder="Loading…" />
  </div>
</FormGroup>
<FormGroup label="Separated inputs" for="fe1-separated-input">
  <div class="row g-2">
    <div class="col">
      <input type="text" class="form-control" id="fe1-separated-input" placeholder="Search for…" />
    </div>
    <div class="col-auto">
      <a href="#" class="btn btn-icon" aria-label="Button">
        <Icon name="search" />
      </a>
    </div>
  </div>
</FormGroup>

<FormGroup label="Input with help icon" for="fe1-help-icon-input">
  <div class="row g-2">
    <div class="col">
      <input type="text" class="form-control" id="fe1-help-icon-input" placeholder="Search for…" />
    </div>
    <div class="col-auto align-self-center">
      <span class="form-help" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="<p>ZIP Code must be US or CDN format. You can use an extended ZIP+4 code to determine address more accurately.</p><p class='mb-0'><a href='#'>USP ZIP codes lookup tools</a></p>" data-bs-html="true">?</span>
    </div>
  </div>
</FormGroup>
<!--
	is:inline: TomSelect loads via a deferred page-lib <script>. A processed (module)
	script runs in document order alongside other deferred/module scripts — since this
	tag sits before the library's <script defer>, it would run first and find
	window.TomSelect undefined. is:inline keeps this a classic script that runs
	synchronously at parse time, so the readyState/DOMContentLoaded guard below
	actually delays until after the library has loaded.
-->
<CaptureScript>
  <!-- BEGIN SELECT STATES -->
  <script is:inline>
    function initSelectStates() {
      window.tabler_select ??= {}

      const renderOption = (data, escape) => {
        if (data.customProperties) {
          return `<div><span class="dropdown-item-indicator">${data.customProperties}</span>${escape(data.text)}</div>`
        }
        return `<div>${escape(data.text)}</div>`
      }

      window.TomSelect &&
        (window.tabler_select['select-states'] = new TomSelect(document.getElementById('select-states'), {
          copyClassesToDropdown: false,
          dropdownParent: 'body',
          controlInput: '<input>',
          render: {
            item: renderOption,
            option: renderOption,
          },
        }))
    }

    document.readyState !== 'loading' ? initSelectStates() : document.addEventListener('DOMContentLoaded', initSelectStates, { once: true })
  </script>
  <!-- END SELECT STATES -->
</CaptureScript>