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

shared/components/forms/FormElements4.astro
347 строк18 KB
Paweł Kuna
Improve accessibility across layouts, components, and forms (#2799)
06 авг 2026, 00:40
06 авг 2026, 00:401effe22
---
import ButtonGroup from '@ui/ButtonGroup.astro'
import Icon from '@ui/Icon.astro'
import FormGroup from '@ui/FormGroup.astro'
import Avatar from '@ui/Avatar.astro'
---

<FormGroup label="Simple selectgroup">
  <fieldset>
    <legend class="visually-hidden">Simple selectgroup</legend>
    <div class="form-selectgroup">
      <label class="form-selectgroup-item">
        <input type="checkbox" name="name" value="HTML" class="form-selectgroup-input" checked />
        <span class="form-selectgroup-label">HTML</span>
      </label>
      <label class="form-selectgroup-item">
        <input type="checkbox" name="name" value="CSS" class="form-selectgroup-input" />
        <span class="form-selectgroup-label">CSS</span>
      </label>
      <label class="form-selectgroup-item">
        <input type="checkbox" name="name" value="PHP" class="form-selectgroup-input" />
        <span class="form-selectgroup-label">PHP</span>
      </label>
      <label class="form-selectgroup-item">
        <input type="checkbox" name="name" value="JavaScript" class="form-selectgroup-input" />
        <span class="form-selectgroup-label">JavaScript</span>
      </label>
    </div>
  </fieldset>
</FormGroup>

<FormGroup label="Icon input">
  <fieldset>
    <legend class="visually-hidden">Icon input</legend>
    <div class="form-selectgroup">
      <label class="form-selectgroup-item">
        <input type="checkbox" name="name" value="sun" class="form-selectgroup-input" checked />
        <span class="form-selectgroup-label"><Icon name="sun" /></span>
      </label>
      <label class="form-selectgroup-item">
        <input type="checkbox" name="name" value="moon" class="form-selectgroup-input" />
        <span class="form-selectgroup-label"><Icon name="moon" /></span>
      </label>
      <label class="form-selectgroup-item">
        <input type="checkbox" name="name" value="cloud-rain" class="form-selectgroup-input" />
        <span class="form-selectgroup-label"><Icon name="cloud-rain" /></span>
      </label>
      <label class="form-selectgroup-item">
        <input type="checkbox" name="name" value="cloud" class="form-selectgroup-input" />
        <span class="form-selectgroup-label"><Icon name="cloud" /></span>
      </label>
      <label class="form-selectgroup-item">
        <input type="checkbox" name="name" value="Other" class="form-selectgroup-input" />
        <span class="form-selectgroup-label">Other</span>
      </label>
    </div>
  </fieldset>
</FormGroup>

<FormGroup label="Selectgroup with icons and text">
  <fieldset>
    <legend class="visually-hidden">Selectgroup with icons and text</legend>
    <div class="form-selectgroup">
      <label class="form-selectgroup-item">
        <input type="radio" name="icons" value="home" class="form-selectgroup-input" checked />
        <span class="form-selectgroup-label"><Icon name="home" class="me-1" /> Home</span>
      </label>
      <label class="form-selectgroup-item">
        <input type="radio" name="icons" value="user" class="form-selectgroup-input" />
        <span class="form-selectgroup-label"><Icon name="user" class="me-1" /> User</span>
      </label>
      <label class="form-selectgroup-item">
        <input type="radio" name="icons" value="circle" class="form-selectgroup-input" />
        <span class="form-selectgroup-label"><Icon name="circle" class="me-1" /> Circle</span>
      </label>
      <label class="form-selectgroup-item">
        <input type="radio" name="icons" value="square" class="form-selectgroup-input" />
        <span class="form-selectgroup-label"><Icon name="square" class="me-1" /> Square</span>
      </label>
    </div>
  </fieldset>
</FormGroup>

<FormGroup label="Different style">
  <fieldset>
    <legend class="visually-hidden">Different style</legend>
    <div class="form-selectgroup form-selectgroup-pills">
      <label class="form-selectgroup-item">
        <input type="checkbox" name="name" value="HTML" class="form-selectgroup-input" checked />
        <span class="form-selectgroup-label">HTML</span>
      </label>
      <label class="form-selectgroup-item">
        <input type="checkbox" name="name" value="CSS" class="form-selectgroup-input" />
        <span class="form-selectgroup-label">CSS</span>
      </label>
      <label class="form-selectgroup-item">
        <input type="checkbox" name="name" value="PHP" class="form-selectgroup-input" />
        <span class="form-selectgroup-label">PHP</span>
      </label>
      <label class="form-selectgroup-item">
        <input type="checkbox" name="name" value="JavaScript" class="form-selectgroup-input" />
        <span class="form-selectgroup-label">JavaScript</span>
      </label>
    </div>
  </fieldset>
</FormGroup>

<FormGroup label="Payment method">
  <fieldset>
    <legend class="visually-hidden">Payment method</legend>
    <div class="form-selectgroup form-selectgroup-boxes d-flex flex-column">
      <label class="form-selectgroup-item flex-fill">
        <input type="radio" name="form-payment" value="visa" class="form-selectgroup-input" />
        <div class="form-selectgroup-label d-flex align-items-center p-3">
          <div class="me-3">
            <span class="form-selectgroup-check"></span>
          </div>
          <div>
            <span class="payment payment-provider-visa payment-xs me-2"></span>
            ending in <strong>7998</strong>
          </div>
        </div>
      </label>
      <label class="form-selectgroup-item flex-fill">
        <input type="radio" name="form-payment" value="mastercard" class="form-selectgroup-input" checked />
        <div class="form-selectgroup-label d-flex align-items-center p-3">
          <div class="me-3">
            <span class="form-selectgroup-check"></span>
          </div>
          <div>
            <span class="payment payment-provider-mastercard payment-xs me-2"></span>
            ending in <strong>1000</strong>
          </div>
        </div>
      </label>
      <label class="form-selectgroup-item flex-fill">
        <input type="radio" name="form-payment" value="paypal" class="form-selectgroup-input" />
        <div class="form-selectgroup-label d-flex align-items-center p-3">
          <div class="me-3">
            <span class="form-selectgroup-check"></span>
          </div>
          <div>
            <span class="payment payment-provider-paypal payment-xs me-2"></span>
          </div>
        </div>
      </label>
    </div>
  </fieldset>
</FormGroup>

<FormGroup label="Project Manager">
  <fieldset>
    <legend class="visually-hidden">Project Manager</legend>
    <div class="form-selectgroup form-selectgroup-boxes d-flex flex-column">
      <label class="form-selectgroup-item flex-fill">
        <input type="checkbox" name="form-project-manager[]" value="1" class="form-selectgroup-input" />
        <div class="form-selectgroup-label d-flex align-items-center p-3">
          <div class="me-3">
            <span class="form-selectgroup-check"></span>
          </div>
          <div class="form-selectgroup-label-content d-flex align-items-center">
            <Avatar src="static/avatars/000m.jpg" class="me-3" />
            <div>
              <div class="fw-medium">Paweł Kuna</div>
              <div class="text-secondary">UI Designer</div>
            </div>
          </div>
        </div>
      </label>
      <label class="form-selectgroup-item flex-fill">
        <input type="checkbox" name="form-project-manager[]" value="2" class="form-selectgroup-input" checked />
        <div class="form-selectgroup-label d-flex align-items-center p-3">
          <div class="me-3">
            <span class="form-selectgroup-check"></span>
          </div>
          <div class="form-selectgroup-label-content d-flex align-items-center">
            <Avatar src="static/avatars/052f.jpg" class="me-3" />
            <div>
              <div class="fw-medium">Jeffie Lewzey</div>
              <div class="text-secondary">Chemical Engineer</div>
            </div>
          </div>
        </div>
      </label>
      <label class="form-selectgroup-item flex-fill">
        <input type="checkbox" name="form-project-manager[]" value="3" class="form-selectgroup-input" />
        <div class="form-selectgroup-label d-flex align-items-center p-3">
          <div class="me-3">
            <span class="form-selectgroup-check"></span>
          </div>
          <div class="form-selectgroup-label-content d-flex align-items-center">
            <Avatar src="static/avatars/002m.jpg" class="me-3" />
            <div>
              <div class="fw-medium">Mallory Hulme</div>
              <div class="text-secondary">Geologist IV</div>
            </div>
          </div>
        </div>
      </label>
      <label class="form-selectgroup-item flex-fill">
        <input type="checkbox" name="form-project-manager[]" value="4" class="form-selectgroup-input" />
        <div class="form-selectgroup-label d-flex align-items-center p-3">
          <div class="me-3">
            <span class="form-selectgroup-check"></span>
          </div>
          <div class="form-selectgroup-label-content d-flex align-items-center">
            <Avatar src="static/avatars/003m.jpg" class="me-3" />
            <div>
              <div class="fw-medium">Dunn Slane</div>
              <div class="text-secondary">Research Nurse</div>
            </div>
          </div>
        </div>
      </label>
      <label class="form-selectgroup-item flex-fill">
        <input type="checkbox" name="form-project-manager[]" value="5" class="form-selectgroup-input" />
        <div class="form-selectgroup-label d-flex align-items-center p-3">
          <div class="me-3">
            <span class="form-selectgroup-check"></span>
          </div>
          <div class="form-selectgroup-label-content d-flex align-items-center">
            <Avatar src="static/avatars/000f.jpg" class="me-3" />
            <div>
              <div class="fw-medium">Emmy Levet</div>
              <div class="text-secondary">VP Product Management</div>
            </div>
          </div>
        </div>
      </label>
    </div>
  </fieldset>
</FormGroup>

<FormGroup label="Buttons group">
  <fieldset>
    <legend class="visually-hidden">Buttons group</legend>
    <ButtonGroup class="w-100">
      <input type="radio" class="btn-check" name="btn-radio-basic" id="btn-radio-basic-1" autocomplete="off" checked />
      <label for="btn-radio-basic-1" {...{ type: 'button' } as unknown as astroHTML.JSX.LabelHTMLAttributes} class="btn">1 min</label>
      <input type="radio" class="btn-check" name="btn-radio-basic" id="btn-radio-basic-2" autocomplete="off" />
      <label for="btn-radio-basic-2" {...{ type: 'button' } as unknown as astroHTML.JSX.LabelHTMLAttributes} class="btn">5 min</label>
      <input type="radio" class="btn-check" name="btn-radio-basic" id="btn-radio-basic-3" autocomplete="off" />
      <label for="btn-radio-basic-3" {...{ type: 'button' } as unknown as astroHTML.JSX.LabelHTMLAttributes} class="btn">10 min</label>
      <input type="radio" class="btn-check" name="btn-radio-basic" id="btn-radio-basic-4" autocomplete="off" />
      <label for="btn-radio-basic-4" {...{ type: 'button' } as unknown as astroHTML.JSX.LabelHTMLAttributes} class="btn">30 min</label>
    </ButtonGroup>
  </fieldset>
</FormGroup>

<FormGroup label="Buttons group with dropdown">
  <fieldset>
    <legend class="visually-hidden">Buttons group with dropdown</legend>
    <ButtonGroup class="w-100">
      <input type="radio" class="btn-check" name="btn-radio-dropdown" id="btn-radio-dropdown-1" autocomplete="off" checked />
      <label for="btn-radio-dropdown-1" {...{ type: 'button' } as unknown as astroHTML.JSX.LabelHTMLAttributes} class="btn">Option 1</label>
      <input type="radio" class="btn-check" name="btn-radio-dropdown" id="btn-radio-dropdown-2" autocomplete="off" />
      <label for="btn-radio-dropdown-2" {...{ type: 'button' } as unknown as astroHTML.JSX.LabelHTMLAttributes} class="btn">Option 2</label>
      <ButtonGroup>
        <input type="radio" class="btn-check" name="btn-radio-dropdown" id="btn-radio-dropdown-dropdown" autocomplete="off" />
        <label for="btn-radio-dropdown-dropdown" class="btn dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Other </label>
        <div class="dropdown-menu">
          <a class="dropdown-item" href="#"> Action </a>
          <a class="dropdown-item" href="#"> Another action </a>
        </div>
        <div class="dropdown-menu dropdown-menu-end">
          <a class="dropdown-item" href="#"> Option 4 </a>
          <a class="dropdown-item" href="#"> Option 5 </a>
          <a class="dropdown-item" href="#"> Option 6 </a>
        </div>
      </ButtonGroup>
    </ButtonGroup>
  </fieldset>
</FormGroup>

<div class="row">
  <div class="col">
    <FormGroup label="Vertical buttons group">
      <fieldset>
        <legend class="visually-hidden">Vertical buttons group</legend>
        <ButtonGroup vertical={true} class="w-100">
          <input type="radio" class="btn-check" name="btn-radio-vertical" id="btn-radio-vertical-1" autocomplete="off" checked />
          <label for="btn-radio-vertical-1" {...{ type: 'button' } as unknown as astroHTML.JSX.LabelHTMLAttributes} class="btn">Button 1</label>
          <input type="radio" class="btn-check" name="btn-radio-vertical" id="btn-radio-vertical-2" autocomplete="off" />
          <label for="btn-radio-vertical-2" {...{ type: 'button' } as unknown as astroHTML.JSX.LabelHTMLAttributes} class="btn">Button 2</label>
          <input type="radio" class="btn-check" name="btn-radio-vertical" id="btn-radio-vertical-3" autocomplete="off" />
          <label for="btn-radio-vertical-3" {...{ type: 'button' } as unknown as astroHTML.JSX.LabelHTMLAttributes} class="btn">Button 3</label>
          <input type="radio" class="btn-check" name="btn-radio-vertical" id="btn-radio-vertical-4" autocomplete="off" />
          <label for="btn-radio-vertical-4" {...{ type: 'button' } as unknown as astroHTML.JSX.LabelHTMLAttributes} class="btn">Button 4</label>
          <input type="radio" class="btn-check" name="btn-radio-vertical" id="btn-radio-vertical-5" autocomplete="off" />
          <label for="btn-radio-vertical-5" {...{ type: 'button' } as unknown as astroHTML.JSX.LabelHTMLAttributes} class="btn">Button 5</label>
        </ButtonGroup>
      </fieldset>
    </FormGroup>
  </div>
  <div class="col">
    <FormGroup label="Vertical with dropdown">
      <fieldset>
        <legend class="visually-hidden">Vertical with dropdown</legend>
        <ButtonGroup vertical={true} class="w-100">
          <input type="radio" class="btn-check" name="btn-radio-vertical-dropdown" id="btn-radio-vertical-dropdown-1" autocomplete="off" checked />
          <label for="btn-radio-vertical-dropdown-1" {...{ type: 'button' } as unknown as astroHTML.JSX.LabelHTMLAttributes} class="btn">Button 1</label>
          <input type="radio" class="btn-check" name="btn-radio-vertical-dropdown" id="btn-radio-vertical-dropdown-2" autocomplete="off" />
          <label for="btn-radio-vertical-dropdown-2" {...{ type: 'button' } as unknown as astroHTML.JSX.LabelHTMLAttributes} class="btn">Button 2</label>
          <input type="radio" class="btn-check" name="btn-radio-vertical-dropdown" id="btn-radio-vertical-dropdown-3" autocomplete="off" />
          <label for="btn-radio-vertical-dropdown-3" {...{ type: 'button' } as unknown as astroHTML.JSX.LabelHTMLAttributes} class="btn">Button 3</label>
          <input type="radio" class="btn-check" name="btn-radio-vertical-dropdown" id="btn-radio-vertical-dropdown-4" autocomplete="off" />
          <label for="btn-radio-vertical-dropdown-4" {...{ type: 'button' } as unknown as astroHTML.JSX.LabelHTMLAttributes} class="btn">Button 4</label>
          <ButtonGroup>
            <input type="radio" class="btn-check" name="btn-radio-vertical-dropdown" id="btn-radio-vertical-dropdown-dropdown" autocomplete="off" />
            <label for="btn-radio-vertical-dropdown-dropdown" class="btn dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Other </label>
            <div class="dropdown-menu">
              <a class="dropdown-item" href="#"> Action </a>
              <a class="dropdown-item" href="#"> Another action </a>
            </div>
            <div class="dropdown-menu dropdown-menu-end">
              <a class="dropdown-item" href="#"> Option 4 </a>
              <a class="dropdown-item" href="#"> Option 5 </a>
              <a class="dropdown-item" href="#"> Option 6 </a>
            </div>
          </ButtonGroup>
        </ButtonGroup>
      </fieldset>
    </FormGroup>
  </div>
</div>

<FormGroup label="Toolbar">
  <fieldset>
    <legend class="visually-hidden">Toolbar</legend>
    <ButtonGroup class="w-100">
      <input type="radio" class="btn-check" name="btn-radio-toolbar" id="btn-radio-toolbar-1" autocomplete="off" checked />
      <label for="btn-radio-toolbar-1" class="btn btn-icon"><Icon name="bold" /></label>
      <input type="radio" class="btn-check" name="btn-radio-toolbar" id="btn-radio-toolbar-2" autocomplete="off" />
      <label for="btn-radio-toolbar-2" class="btn btn-icon"><Icon name="italic" /></label>
      <input type="radio" class="btn-check" name="btn-radio-toolbar" id="btn-radio-toolbar-3" autocomplete="off" />
      <label for="btn-radio-toolbar-3" class="btn btn-icon"><Icon name="underline" /></label>
      <input type="radio" class="btn-check" name="btn-radio-toolbar" id="btn-radio-toolbar-4" autocomplete="off" />
      <label for="btn-radio-toolbar-4" class="btn btn-icon"><Icon name="copy" /></label>
      <input type="radio" class="btn-check" name="btn-radio-toolbar" id="btn-radio-toolbar-5" autocomplete="off" />
      <label for="btn-radio-toolbar-5" class="btn btn-icon"><Icon name="scissors" /></label>
      <input type="radio" class="btn-check" name="btn-radio-toolbar" id="btn-radio-toolbar-6" autocomplete="off" />
      <label for="btn-radio-toolbar-6" class="btn btn-icon"><Icon name="file-plus" /></label>
      <input type="radio" class="btn-check" name="btn-radio-toolbar" id="btn-radio-toolbar-7" autocomplete="off" />
      <label for="btn-radio-toolbar-7" class="btn btn-icon"><Icon name="file-minus" /></label>
    </ButtonGroup>
  </fieldset>
</FormGroup>