Input

Text input, select, toggle, and checkbox. Berkeley Mono for input values (data font). Labels always in mono. All states demonstrated live.

Text Input

PLACEHOLDER

FILLED

WITH HELP TEXT

USERNAME Must be 3-20 characters, letters and numbers only.

FOCUSED

NAME

Click the input to see focus state

ERROR

EMAIL Please enter a valid email address.

DISABLED

READ-ONLY

API KEY

WITH ICON

Select

DEFAULT

COUNTRY

DISABLED

COUNTRY

ERROR

COUNTRY Please select a country.

WITH VALUE

COUNTRY

Toggle

INTERACTIVE

Off

OFF

Notifications

Dark mode

DISABLED OFF

Disabled

DISABLED ON

Disabled

Checkbox

INTERACTIVE Accept terms and conditions

UNCHECKED Remember me

CHECKED Email notifications

DISABLED Disabled option

DISABLED CHECKED Disabled checked

INDETERMINATE Select all

TOKEN REFERENCE

Inputs use component tokens from components.css:

--input-font: var(--type-data-font) (Berkeley Mono)--input-radius: var(--radius-sm) (2px)--input-border: var(--elevation-border)--input-label-font: var(--type-label-font)--toggle-bg-on: var(--color-accent)--checkbox-bg-checked: var(--color-accent)