Forms — Svelte

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

<script>
  import FormGroup from './components/svelte/FormGroup.svelte';
  import Input from './components/svelte/Input.svelte';
</script>

<FormGroup label="Email Address" labelFor="email" required help="We'll never share your email">
  <Input id="email" type="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, name, value, placeholder, required, disabled, readonly
• 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

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

<!-- With error state -->
<FormGroup label="Email" labelFor="email-error" error="Invalid email address">
  <Input id="email-error" type="email" 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

<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

<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

<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
• group (bindable, optional) - Bound value for the selected option (use same bound variable for all radios in the group)
• ariaLabel, ariaDescribedby - Same as Checkbox

Code Example

<script>
  let payment = $state('card');
</script>

<div class="radio-group">
  <label class="radio-label">
    <Radio name="payment" id="payment-card" value="card" bind:group={payment} />
    Credit Card
  </label>
  <label class="radio-label">
    <Radio name="payment" id="payment-paypal" value="paypal" bind:group={payment} />
    PayPal
  </label>
</div>

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);
}

Astro & Vanilla: Astro · Vanilla — same BEM classes and HTML structure.