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

Label

Standalone form label for complex layouts where the label is not built into a form component. Uses mono label font.

DEFAULT EMAIL ADDRESS

WITH FOR LINKED LABEL Click label to focus linked input

DISABLED LOCKED FIELD

Textarea

Multi-line text input. Values displayed in Berkeley Mono (data font). Resizable vertically.

PLACEHOLDER

DESCRIPTION

FILLED

SQL QUERY

WITH HELP TEXT

NOTES Markdown formatting is supported.

ERROR

SQL QUERY Syntax error near SELCT on line 1.

DISABLED

TEMPLATE

READ-ONLY

AUDIT LOG

2026-02-28 12:00:00 — Pipeline started
2026-02-28 12:01:23 — Step 1 complete

File Upload

Drag-and-drop zone for file selection. Validates accept types and max size, then emits valid files via callback. Does not handle uploads — parent owns that logic.

DEFAULT

NO CONSTRAINTS

DISABLED

CUSTOM CONTENT

File Upload Item

Per-file progress row. Parent controls all state — this is a pure display component. Use in a list below a FileUpload zone.

quarterly-report.pdf 2.3 MB

customer-data-export-2026.csv 8.1 MB

65%

meeting-notes.txt 1.2 KB

oversized-backup.zip

File exceeds 50 MB limit

Code Editor

CodeMirror 6 wrapper with SQL, Python, and JSON syntax highlighting. Themed with DS tokens. Supports line numbers, readonly mode, and configurable height.

SQL (EDITABLE)

JSON (EDITABLE)

READ-ONLY

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)--textarea-min-height: 80px--textarea-padding: var(--space-sm)--fileupload-border: dashed var(--color-border)--fileupload-border-dragging: solid var(--color-accent)--fileupload-bg-dragging: var(--color-accent-subtle)--fileupload-item-border: var(--elevation-border)--fileupload-item-error-color: var(--color-destructive)--fileupload-item-complete-color: var(--color-success)