Forms · Huet Demo

Native form controls, first as the browser draws them, then with Huet's minimal form styles. Turn the styles on to theme every part of every control, such as a slider's track, thumb and filled part, from the theme you pick in the configurator.

Minimal styling

Add it to your app:@import "huet/forms.css";<form data-huet-forms>…</form>

Text fields

NameEmailEnter a complete email addressPasswordSearchWebsitePhoneQuantityFruitDisabledRead-only

MessageFields use the surface's border color and keep its background.

Selects

PlanTimezoneDisabledToppings (multiple)

Checkboxes, radios and switches

Checkboxes Checked Unchecked Indeterminate Disabled Disabled, checked

Shipping Standard Express Overnight Drone (disabled)

Switches Notifications Newsletter Required (disabled) Blue, from huet-text-blue-100

Sliders, progress and meters

VolumeSteps of 10DisabledBlue, from huet-text-blue-100Upload, 30%30%Upload, 75%75%Loading (indeterminate)Loading

Battery (optimum)80%Battery (low)35%Battery (critical)10%

Tracks use the surface's border color. Thumbs and filled parts use the text color, and meters use the theme's green, yellow and red.

Dates and times

DateTimeDate and timeMonthWeek

Colors and files

Accent colorAvatarAttachments (disabled)

Buttons

On other surfaces

The same controls inside Huet surfaces take their colors from the surface they're on.

huet-bg-100Project nameVisibilityOpacity45%

Starred On Off Sync

huet-bg-blue-20Project nameVisibilityOpacity45%

Starred On Off Sync