preview/pages/form-layout.astro - dev - githubmirror/tabler

preview/pages/form-layout.astro
208 строк10 KB
Paweł Kuna
Fix skip links, focus rings, and button semantics for keyboard a11y (#2779)
11 авг 2026, 16:28
11 авг 2026, 16:28dd4214b
---
import DefaultLayout from '@shared/layouts/DefaultLayout.astro'
import Button from '@ui/Button.astro'
import InputIcon from '@ui/form/InputIcon.astro'
import Check from '@ui/form/Check.astro'
import Icon from '@ui/Icon.astro'
import Datepicker from '@ui/Datepicker.astro'
import FormGroup from '@ui/FormGroup.astro'
import Card from '@ui/Card.astro'
import CardHeader from '@ui/CardHeader.astro'
import CardBody from '@ui/CardBody.astro'
import Layout from '@shared/components/cards/form/Layout.astro'
import Payment from '@shared/components/cards/form/Payment.astro'
import flags from '@data/flags.json'

const countries = flags as { name: string }[]
---

<DefaultLayout title="Form layout" pageHeader="Form Layout" pageMenu="form.layout" pageLibs={['litepicker']}>
  <div class="row row-cards row-cols-1 row-cols-md-3">
    <div class="col">
      <div class="row row-cards">
        <div class="col-12">
          <Card>
            <CardHeader title="Basic Form" />
            <CardBody>
              <form class="space-y">
                <div class="row">
                  <FormGroup label="Name" labelClass="visually-hidden" for="basic-name" class="col-6">
                    <input type="text" placeholder="Name" class="form-control" id="basic-name" name="name" />
                  </FormGroup>
                  <FormGroup label="Email address" labelClass="visually-hidden" for="basic-email" class="col-6">
                    <input type="email" placeholder="Email address" class="form-control" id="basic-email" name="email" />
                  </FormGroup>
                </div>
                <FormGroup label="Password" labelClass="visually-hidden" for="basic-password" class="">
                  <input type="password" placeholder="Password" class="form-control" id="basic-password" name="password" />
                </FormGroup>
                <FormGroup label="Confirm Password" labelClass="visually-hidden" for="basic-password-confirm" class="">
                  <input type="password" placeholder="Confirm Password" class="form-control" id="basic-password-confirm" name="password_confirm" />
                </FormGroup>
                <div><Button color="primary" block text="Submit" /></div>
              </form>
            </CardBody>
          </Card>
        </div>
        <div class="col-12">
          <Card>
            <CardHeader title="Example Form" />
            <CardBody>
              <form>
                <div class="space-y">
                  <FormGroup label="First Name" for="example-first-name" class="">
                    <input type="text" placeholder="Enter first name" class="form-control" id="example-first-name" name="first_name" />
                  </FormGroup>
                  <FormGroup label="Last Name" for="example-last-name" class="">
                    <input type="text" placeholder="Enter last name" class="form-control" id="example-last-name" name="last_name" />
                  </FormGroup>
                  <FormGroup label="Email" for="example-email" class="">
                    <input type="email" placeholder="Enter email address" class="form-control" id="example-email" name="email" />
                  </FormGroup>
                  <FormGroup label="Select Subject" for="example-subject" class="">
                    <select class="form-select" id="example-subject" name="subject">
                      <option>Option 1</option><option>Option 2</option><option>Option 3</option><option>Option 4</option>
                    </select>
                  </FormGroup>
                  <FormGroup label="Message" for="example-message" class="">
                    <textarea placeholder="Enter your message" rows="6" class="form-control" id="example-message" name="message"></textarea>
                  </FormGroup>
                  <div><Button color="primary" block text="Send Message" iconEnd="arrow-right" /></div>
                </div>
              </form>
            </CardBody>
          </Card>
        </div>
      </div>
    </div>

    <div class="col">
      <div class="row row-cards">
        <div class="col-12">
          <Card>
            <CardHeader title="Example Form with Icons" />
            <CardBody>
              <form class="space-y">
                <div><InputIcon icon="user" placeholder="Username" prepend /></div>
                <div><InputIcon icon="mail" placeholder="Email address" prepend type="email" /></div>
                <div><InputIcon icon="lock" placeholder="Password" prepend type="password" /></div>
                <div><InputIcon icon="lock" placeholder="Confirm Password" prepend type="password" /></div>
                <div>
                  <div class="row align-items-center">
                    <div class="col"><Check title="Remember me" class="m-0" /></div>
                    <div class="col-auto"><Button color="primary" text="Create Account" iconEnd="arrow-right" /></div>
                  </div>
                </div>
              </form>
            </CardBody>
          </Card>
        </div>

        <div class="col-12">
          <Card>
            <CardHeader title="Form with Icons and Validation" />
            <CardBody>
              <form class="space-y">
                <div>
                  <div class="input-icon">
                    <span class="input-icon-addon"><Icon name="user" /></span>
                    <input type="text" value="" class="form-control is-invalid" placeholder="Username" aria-label="Username" aria-invalid="true" aria-describedby="username-invalid-feedback" />
                    <div class="invalid-feedback" id="username-invalid-feedback">This throws the icon out of bounds when input element contains `is-invalid` class.</div>
                  </div>
                </div>
                <div>
                  <div class="input-icon">
                    <span class="input-icon-addon"><Icon name="mail" /></span>
                    <input type="email" value="" class="form-control is-valid" placeholder="Email" aria-label="Email" aria-invalid="false" aria-describedby="email-valid-feedback" />
                    <div class="valid-feedback" id="email-valid-feedback">This email looks good!</div>
                  </div>
                </div>
              </form>
            </CardBody>
          </Card>
        </div>

        <div class="col-12"><Layout horizontal title="Horizontal form" /></div>

        <div class="col-12">
          <Card>
            <CardHeader title="Example Form" />
            <CardBody>
              <form>
                <div class="space-y">
                  <div><h4>Personal Info</h4></div>
                  <div class="row row-cols-2 g-4">
                    <FormGroup label="First Name" for="example-form-first-name" class="">
                      <input type="text" id="example-form-first-name" placeholder="Enter first name" class="form-control" autocomplete="given-name" />
                    </FormGroup>
                    <FormGroup label="Last Name" for="example-form-last-name" class="">
                      <input type="text" id="example-form-last-name" placeholder="Enter last name" class="form-control" autocomplete="family-name" />
                    </FormGroup>
                    <FormGroup label="Gender" for="example-form-gender" class="">
                      <div>
                        <select class="form-select" id="example-form-gender">
                          <option>Male</option>
                          <option>Female</option>
                          <option>Others</option>
                        </select>
                      </div>
                    </FormGroup>
                    <FormGroup label="Date of Birth" for="datepicker-birth-date" class="">
                      <div><Datepicker layout="icon" id="birth-date" /></div>
                    </FormGroup>
                  </div>
                  <FormGroup label="Category" for="example-form-category" class="">
                    <div>
                      <select class="form-select" id="example-form-category">
                        <option>Category 1</option>
                        <option>Category 2</option>
                        <option>Category 3</option>
                      </select>
                    </div>
                  </FormGroup>
                  <div><h4>Address</h4></div>
                  <FormGroup label="Street" for="example-form-street" class="">
                    <input type="text" id="example-form-street" class="form-control" autocomplete="street-address" />
                  </FormGroup>
                  <div class="row row-cols-2 g-4">
                    <FormGroup label="City" for="example-form-city" class="">
                      <input type="text" id="example-form-city" class="form-control" autocomplete="address-level2" />
                    </FormGroup>
                    <FormGroup label="State" for="example-form-state" class="">
                      <input type="text" id="example-form-state" class="form-control" autocomplete="address-level1" />
                    </FormGroup>
                    <FormGroup label="Post Code" for="example-form-postcode" class="">
                      <input type="text" id="example-form-postcode" class="form-control" autocomplete="postal-code" />
                    </FormGroup>
                    <FormGroup label="Country" for="example-form-country" class="">
                      <div>
                        <select class="form-select" id="example-form-country" autocomplete="country-name">
                          <option>--Select Country--</option>
                          {countries.map((country) => <option>{country.name}</option>)}
                        </select>
                      </div>
                    </FormGroup>
                  </div>
                  <div>
                    <FormGroup label="Membership" class="" associate={false}>
                      <div class="d-flex flex-row gap-4">
                        <Check title="Free" type="radio" name="membership" checked />
                        <Check title="Paid" type="radio" name="membership" />
                      </div>
                    </FormGroup>
                  </div>
                  <div class="text-end">
                    <Button text="Cancel" />
                    <Button color="primary" text="Save Changes" />
                  </div>
                </div>
              </form>
            </CardBody>
          </Card>
        </div>
      </div>
    </div>

    <div class="col"><Payment label="Visa" /></div>
  </div>
</DefaultLayout>