shared/components/cards/form/Payment.astro - dev - githubmirror/tabler

shared/components/cards/form/Payment.astro
93 строки3 KB
Paweł Kuna
Improve accessibility across layouts, components, and forms (#2799)
06 авг 2026, 00:40
06 авг 2026, 00:401effe22
---
import FormHint from '@ui/FormHint.astro'
import CardSubtitle from '@ui/CardSubtitle.astro'
import Button from '@ui/Button.astro'
import ButtonList from '@ui/ButtonList.astro'
import CardTitle from '@ui/CardTitle.astro'
import FormGroup from '@ui/FormGroup.astro'
---

<form class="card">
  <div class="card-body">
    <CardTitle>Payment Method</CardTitle>
    <CardSubtitle class="mb-4">All transactions are secure and encrypted</CardSubtitle>

    <FormGroup label="Name on Card" for="payment-form-name">
      <input type="text" id="payment-form-name" class="form-control" placeholder="John Doe" autocomplete="cc-name" />
    </FormGroup>

    <div class="row">
      <div class="col-8">
        <FormGroup label="Card Number" for="payment-form-number">
          <input type="text" id="payment-form-number" class="form-control" placeholder="1234 5678 9012 3456" autocomplete="cc-number" aria-describedby="payment-form-number-hint" />
          <FormHint as="small" id="payment-form-number-hint">Enter your 16-digit number.</FormHint>
        </FormGroup>
      </div>
      <div class="col-4">
        <FormGroup label="CVV" for="payment-form-cvv">
          <input type="text" id="payment-form-cvv" class="form-control" placeholder="123" autocomplete="cc-csc" />
        </FormGroup>
      </div>
    </div>

    <div class="row">
      <div class="col-6">
        <FormGroup label="Month" for="payment-form-exp-month">
          <select id="payment-form-exp-month" class="form-select" autocomplete="cc-exp-month">
            <option value="">MM</option>
            <option value="1">January</option>
            <option value="2">February</option>
            <option value="3">March</option>
            <option value="4">April</option>
            <option value="5">May</option>
            <option value="6">June</option>
            <option value="7">July</option>
            <option value="8">August</option>
            <option value="9">September</option>
            <option value="10">October</option>
            <option value="11">November</option>
            <option value="12">December</option>
          </select>
        </FormGroup>
      </div>
      <div class="col-6">
        <FormGroup label="Year" for="payment-form-exp-year">
          <select id="payment-form-exp-year" class="form-select" autocomplete="cc-exp-year">
            <option value="">YYYY</option>
            <option value="2025">2025</option>
            <option value="2026">2026</option>
            <option value="2027">2027</option>
            <option value="2028">2028</option>
            <option value="2029">2029</option>
            <option value="2030">2030</option>
          </select>
        </FormGroup>
      </div>
    </div>

    <hr class="my-4" />

    <CardTitle>Billing Address</CardTitle>
    <CardSubtitle class="mb-4">The billing address associated with your payment method</CardSubtitle>

    <div class="mb-3">
      <label class="form-check">
        <input class="form-check-input" type="checkbox" checked />
        <span class="form-check-label">Same as shipping address</span>
      </label>
    </div>

    <hr class="my-4" />

    <FormGroup label="Comments" for="payment-form-comments">
      <textarea id="payment-form-comments" class="form-control" rows="3" placeholder="Add any additional comments"></textarea>
    </FormGroup>

    <div class="mt-4">
      <ButtonList>
        <Button text="Submit" color="primary" />
        <Button text="Cancel" />
      </ButtonList>
    </div>
  </div>
</form>