Let HTML do the form work.

Twenty-four components, one ordinary form. Change a field or explore a panel and see what the browser would send.

Early preview

The form

01 State & sections

Toggle<h6-toggle>

Priority handling

A pressed button submits its value. Try Space or Enter.

Contact details<h6-tabs>

Display name

Receipt email

Both panels contribute their fields. Arrow keys move between tabs.

Delivery instructions<h6-accordion>

Delivery note

Gift message

Closed sections keep their form values. Invalid fields reveal their section.

02 Identifiers & verification

IBAN<h6-iban>

Country format and checksum validation.

BIC / SWIFT<h6-bic>

8 or 11 characters.

Verification code<h6-otp>

A six-digit code, including leading zeros.

03 Options & search

Shipping method<h6-select>

Choose a label; the form receives its identifier. Clear leaves it unanswered.

Destination country<h6-combobox>

Type to filter, then choose. Search text alone contributes no form entry.

Delivery date<h6-date-picker>

Enter MM/DD/YYYY or choose a day. The form receives YYYY-MM-DD without a time zone.

Travel period<h6-date-range-picker>

Choose two days or type both dates. The form receives period.start and period.end as YYYY-MM-DD.

04 Numeric choices

Volume<h6-slider>

Drag or use arrow keys. Submitted as one number.

Price filter (USD)<h6-range-slider>

Two named boundaries. Handles stop at each other.

Experience rating<h6-rating>

Hover previews a score. Choose to commit; Clear removes the entry.

05 Values with more to say

Session duration<h6-duration>

Try 1h 30m, 90m, or 01:30. Submitted in seconds.

Budget range (USD)<h6-interval>

One control, two named values. The lower boundary cannot exceed the upper.

06 Choices & collections

Delivery speed<h6-segmented>

Native radio keys. The form receives the selected identifier.

Topics<h6-tags>

Enter or comma adds a tag. Each tag is a separate form entry.

Product updates

An unchecked switch sends no value.

<h6-switch>

07 Everyday form controls

Notification frequency<h6-radio-group>

Seats<h6-number-input>

Type a number, use the arrow keys, or hold a step button.

Demo password<h6-password-input>

A fictional value. Revealing it changes its display, not its form value.

Export formats<h6-toggle-group>

Multiple selections contribute repeated entries. Arrow keys move focus.

Table selection<h6-checkbox>

	Example	Type
	Profile form	Form
	Settings panel	Panel
	Search filters	Form

2 of 3 selected. The header checkbox has no submitted value.

08 Native HTML, shared styling

Reference<h6-field>

The real input owns its value, validation, and form entry. The wrapper supplies its base style.

Message

Reply via

A native select keeps its platform picker. Appearance follows the same theme.

Native actions<button>

Sample values stay in this browser.

Disable the fieldsetWatch the entries disappear.

Live form data

33 entries

Current form entries, preserving repeated field names
Name	Value

Repeated names become arrays in this JSON view.

All fields validReady to edit

These are the actual form entries. No separate state object, no hidden proxy inputs.

Theme CSS

These palettes and light/dark presets use only --hp-* variables. Apply hp-light or hp-dark to any theme scope. Add a palette class such as hp-blue to that same scope.

Download themes · shadcn adapter

Loading theme CSS…

Last submitted data

A regular form, with a little more vocabulary.

Every control participates through the browser’s form APIs. Specialized fields keep a real text input inside, while their normalized value goes into the form.

This preview checks ten IBAN country formats and their check digits, plus BIC structure. It does not verify bank accounts, BIC registration, or authentication codes.

The entire integration

<form>
  <h6-iban name="iban" required></h6-iban>
  <h6-duration name="seconds"></h6-duration>
  <h6-tags name="topics"></h6-tags>
  <h6-switch name="updates"></h6-switch>
  <button>Submit</button>
</form>