Design System

Text Input

Text inputs allow users to enter and edit short-form text. They support four visual states — default, hover, focus, and disabled — each driven by semantic tokens that adapt automatically between light and dark modes.

Input States

Inputs transition through four visual states. Borders, backgrounds, and text colours are driven by semantic tokens that switch automatically between light and dark mode — no additional props needed.

Interactive

Disabled

Input

Padding

10px 12px

Border Radius

6px

Border Width

1.5px

Font Size

14px

Theming

Input colours are driven by a combination of shared and input-specific semantic tokens. Shared tokens like bg.card and border.default are reused across components, while input.* tokens handle interaction states unique to form fields.

Property

Token

Light

Dark

Background

--bg-card

white

gray.800

Background Disabled

--neutral-bg

gray.100

gray.900

Border

--border

gray.200

gray.700

Border Hover

--input-border-hover

gray.300

gray.600

Border Focus

--input-border-focus

brand.600

Text

--text

gray.900

gray.50

Text Disabled

--text-disabled

gray.500

gray.400

Placeholder

--placeholder

tertiary.600

gray.400

Focus Ring

--focus-ring

brand.600

Best Practices

Always pair inputs with a visible label or aria-label

Use placeholder text as a hint, not a replacement for labels

Provide clear focus indicators for keyboard navigation

Use semantic tokens so inputs adapt to colour mode automatically

Don't

Don't use placeholder text as the only label

Don't remove the focus ring — it is essential for accessibility

Don't hardcode border or background colours — use tokens

Don't disable inputs without explaining why in a tooltip or helper text

Accessibility

Labelling

Every input must be associated with a label via htmlFor / id, or use aria-label for icon-only inputs. Placeholder text alone is not accessible.

Focus Visibility

The focus ring (secondary.600) and border highlight ensure keyboard users can clearly identify the active input. Never suppress these indicators.

Error Announcements

When isInvalid is true, pair it with FormErrorMessage inside a FormControl. Chakra automatically adds aria-invalid and connects the error message via aria-describedby.