Forms — eink-ui

Error summary

E-Ink rationale: The error summary uses a thick border (not a filled background) to draw attention without causing a large repaint region. Anchor links within the summary let users jump to specific fields — critical on E-Ink where scrolling is slow.

There are 3 errors in this form

Full name is required
Enter a valid email address
You must accept the terms

Complete form example

This form demonstrates labels, help text, required fields, disabled fields, and validation error states.

Full name Full name is required.

Email address We'll use this to send your confirmation. Enter a valid email address.

Phone number (optional) Include country code for international numbers.

Country

Short bio (optional) Maximum 200 characters.

Referral code This code was automatically applied and cannot be changed.

Notification preferences

Email notifications

SMS notifications

Push notifications (not available on this device)

Notification frequency

Instant

Daily digest

Weekly summary

I accept the terms and conditions

You must accept the terms to continue.

Fieldset grouping

Use native <fieldset> and <legend> for logical groups.

Shipping address

Street

City

Postal code

Layout patterns

E-Ink rationale: Forms should always be single-column on E-Ink devices. Multi-column form layouts cause confusion on 6" screens and trigger more partial refreshes when navigating between fields. Side-by-side fields are only appropriate for very short inputs (e.g., city + zip code on wide screens).

Side-by-side fields (wide screens only)

First name

Last name