Form Components — Vanilla

Form fields with vanilla HTML. Same BEM classes and structure as Astro and Svelte. Ensure Rizzo CSS is loaded.

Form Components

Rizzo CSS form components use semantic HTML and BEM classes. Use the same structure as Astro and Svelte: form-group, form-group__label, form-input, form-group__help, form-error, form-success. Sizes: form-input--sm, form-input--lg. States: form-input--error, form-input--success. Checkbox/radio: checkbox-label, radio-label, checkbox-group, radio-group.

FormGroup

Wrap fields with form-group. Label: form-group__label; add class required for the required indicator. Help text: form-group__help. Error/success: form-error, form-success.

Live Example
We'll never share your email.

HTML

html html 
<div class="form-group">
  <label class="form-group__label required" for="email">Email Address</label>
  <input id="email" type="email" class="form-input" name="email" placeholder="you@example.com" />
  <span class="form-group__help">We'll never share your email.</span>
</div>

Input

Use form-input on text inputs. Add form-input--sm or form-input--lg for size; form-input--error or form-input--success for validation. Set aria-invalid="true" when showing an error.

Input Types

Live Examples

Input Sizes

Live Examples

Validation States

Live Examples
This field is required.
Looks good!

Textarea

Use form-input on <textarea> for the same sizes and validation classes.

Live Example
Enter your message here.

HTML

html html 
<div class="form-group">
  <label class="form-group__label" for="message">Message</label>
  <textarea id="message" name="message" class="form-input" rows="5" placeholder="Your message..."></textarea>
  <span class="form-group__help">Enter your message here.</span>
</div>

Select

Use form-input on <select>.

Live Example

HTML

html html 
<div class="form-group">
  <label class="form-group__label required" for="country">Country</label>
  <select id="country" name="country" class="form-input" required>
    <option value="">Select a country</option>
    <option value="us">United States</option>
    <option value="ca">Canada</option>
    <option value="uk">United Kingdom</option>
  </select>
</div>

Checkbox

Wrap each checkbox in a checkbox-label. Group multiple with checkbox-group. No extra class on the <input type="checkbox">; Rizzo styles all checkboxes.

Live Examples
Preferences

HTML

html html 
<div class="form-group" role="group" aria-labelledby="prefs-heading">
  <span id="prefs-heading" class="form-group__label">Preferences</span>
  <div class="checkbox-group">
    <label class="checkbox-label">
      <input type="checkbox" id="newsletter" name="preferences" value="newsletter" />
      Subscribe to newsletter
    </label>
    <label class="checkbox-label">
      <input type="checkbox" id="updates" name="preferences" value="updates" />
      Receive product updates
    </label>
  </div>
</div>

Radio

Wrap each radio in a radio-label. Group with radio-group. Use the same name for all options.

Live Example
Payment Method

HTML

html html 
<div class="form-group" role="group" aria-labelledby="payment-heading">
  <span id="payment-heading" class="form-group__label required">Payment Method</span>
  <div class="radio-group">
    <label class="radio-label">
      <input type="radio" id="payment-card" name="payment" value="card" checked />
      Credit Card
    </label>
    <label class="radio-label">
      <input type="radio" id="payment-paypal" name="payment" value="paypal" />
      PayPal
    </label>
  </div>
</div>

Complete Form Example

Live Example
We'll never share your email.

Accessibility

Use for and id to associate labels with inputs. Set aria-invalid="true" on invalid fields. Put error messages in an element with role="alert". Success messages can use role="status".

Styling

Form styles use semantic theme variables in src/styles/forms.css. Same BEM and behavior as Astro and Svelte.

Astro & Svelte: Astro ¡ Svelte