Form Controls

Native form controls with consistent styling, labels, hints, and error states.

See the dedicated pages for Input, Textarea, Select, Combobox, Checkbox, and Radio.

Input

{% include components/input.html
   name="email"
   label="Email"
   type="email"
   placeholder="you@example.com"
   required=true
%}

Email

Textarea

{% include components/textarea.html
   name="message"
   label="Message"
   rows=4
%}

Message

Select

{% include components/select.html
   name="plan"
   label="Plan"
   placeholder="Choose a plan"
   options=site.data.demo.select_options
%}

Checkbox & Radio

{% include components/checkbox.html name="terms" label="I agree" %}
{% include components/radio.html name="tier" value="free" label="Free" checked=true %}
{% include components/radio.html name="tier" value="pro" label="Pro" %}

I agree to the terms Free Pro

Accessibility

• Labels are associated with controls via for / id
• required is reflected in the label (*) and the control
• Errors use aria-invalid and role="alert"
• Hints are linked with aria-describedby when present