Form Components — Astro

Form Components

Rizzo CSS includes a comprehensive set of accessible form components built with semantic HTML and ARIA attributes. All form components use theme variables and support validation states.

FormGroup

The FormGroup component provides a wrapper for form fields with labels, help text, and error/success messages.

Props

• label (string, optional) - Label text
• labelFor (string, optional) - ID of the input element
• required (boolean, optional) - Shows required indicator
• help (string, optional) - Help text displayed below input
• error (string, optional) - Error message
• success (string, optional) - Success message
• class (string, optional) - Additional CSS classes

Code Example

---
import FormGroup from '../../components/FormGroup.astro';
import Input from '../../components/Input.astro';
---

<FormGroup label="Email Address" labelFor="email" required help="We'll never share your email">
  <Input type="email" id="email" name="email" placeholder="you@example.com" />
</FormGroup>

Input

The Input component supports various input types with validation states and sizes.

Props

• type (string, optional) - Input type (text, email, password, number, tel, url, search, date, time, datetime-local, month, week)
• id (string, optional) - Input ID
• name (string, optional) - Input name
• value (string, optional) - Input value
• placeholder (string, optional) - Placeholder text
• required (boolean, optional) - Required field
• disabled (boolean, optional) - Disabled state
• readonly (boolean, optional) - Read-only state
• size ('sm' | 'md' | 'lg', optional) - Input size (default: 'md')
• error (boolean, optional) - Error state
• success (boolean, optional) - Success state

Input Types

Input Sizes

Validation States

Code Example

---
import FormGroup from '../../components/FormGroup.astro';
import Input from '../../components/Input.astro';
---

<FormGroup label="Email" labelFor="email" required>
  <Input type="email" id="email" name="email" placeholder="you@example.com" />
</FormGroup>

<!-- With error state -->
<FormGroup label="Email" labelFor="email-error" error="Invalid email address">
  <Input type="email" id="email-error" name="email" error />
</FormGroup>

Textarea

The Textarea component for multi-line text input.

Props

• id, name, value, placeholder, required, disabled, readonly
• rows (number, optional) - Number of rows (default: 4)
• cols (number, optional) - Number of columns
• size, error, success - Same as Input

Code Example

---
import FormGroup from '../../components/FormGroup.astro';
import Textarea from '../../components/Textarea.astro';
---

<FormGroup label="Message" labelFor="message" help="Enter your message here">
  <Textarea id="message" name="message" rows={5} placeholder="Your message..." />
</FormGroup>

Select

The Select component for dropdown selections.

Props

• id, name, value, required, disabled
• size, error, success - Same as Input

Code Example

---
import FormGroup from '../../components/FormGroup.astro';
import Select from '../../components/Select.astro';
---

<FormGroup label="Country" labelFor="country" required>
  <Select id="country" name="country">
    <option value="">Select a country</option>
    <option value="us">United States</option>
    <option value="ca">Canada</option>
    <option value="uk">United Kingdom</option>
  </Select>
</FormGroup>

Checkbox

The Checkbox component for single or multiple selections.

Props

• id, name, value, checked, required, disabled
• ariaLabel (string, optional) - Accessible label
• ariaDescribedby (string, optional) - ID of element that describes this checkbox

Code Example

---
import Checkbox from '../../components/Checkbox.astro';
---

<label class="checkbox-label">
  <Checkbox id="newsletter" name="preferences" value="newsletter" />
  Subscribe to newsletter
</label>

<!-- Checkbox Group -->
<div class="checkbox-group">
  <label class="checkbox-label">
    <Checkbox id="opt1" name="options" value="1" />
    Option 1
  </label>
  <label class="checkbox-label">
    <Checkbox id="opt2" name="options" value="2" />
    Option 2
  </label>
</div>

Radio

The Radio component for single selection from multiple options.

Props

• id, name, value, checked, required, disabled
• ariaLabel, ariaDescribedby - Same as Checkbox

Code Example

---
import Radio from '../../components/Radio.astro';
---

<fieldset>
  <legend>Payment Method</legend>
  <div class="radio-group">
    <label class="radio-label">
      <Radio id="payment-card" name="payment" value="card" checked />
      Credit Card
    </label>
    <label class="radio-label">
      <Radio id="payment-paypal" name="payment" value="paypal" />
      PayPal
    </label>
  </div>
</fieldset>

Complete Form Example

Accessibility

All form components follow accessibility best practices:

• Proper label associations using for and id attributes
• ARIA attributes for validation states (aria-invalid, aria-describedby)
• Error messages with role="alert" for screen readers
• Keyboard navigation support
• Focus indicators using theme accent color
• Required field indicators

Styling

All form components use semantic theme variables and automatically adapt to the selected theme. Form styles are defined in src/styles/forms.css.

Customization

You can customize form inputs using CSS variables or by adding custom classes:

.custom-input {
  border-radius: var(--radius-lg);
  padding: var(--spacing-4);
}

Svelte & Vanilla: Svelte · Vanilla — same BEM classes, structure, and examples.