Input

• Layer: Component
• Base: @ark-ui/solid

Input is the raw input element. Wrap with Field to add label, error message, and hint text.

<Field label="Search" hint="Describe what you remember">
  <Input placeholder="What are you looking for?" />
</Field>

Depth via --surface2 background against --surface cards.

Default

Basic inputs

Search

Email

Sizes

Size comparison

Small

Medium

Size	Padding	Font	Use
sm	8px x 4px	--fs-sm	Dense forms, inline filters
md	12px x 8px	--fs-base	Default. Most contexts.

States

Hint, error, and disabled

With hintWe'll never share your email.

With errorThis field is required.

Disabled

• Default — --surface2 background, --border border
• Placeholder — --muted colour text
• Focus — border transitions to --cyan, focus ring via box-shadow
• Error — border transitions to --status-error, error message appears below. aria-invalid="true"
• Disabled — opacity: 0.4, cursor: not-allowed

Live Validation

Type to see validation

Live validation

Props

Input

Prop	Type	Default	Description
size	'sm' | 'md'	'md'	Input size

Plus all native <input> attributes (placeholder, type, value, disabled, etc.).

Field

Prop	Type	Default	Description
label	string	—	Label rendered above the field
error	string	—	Error message — triggers error state
hint	string	—	Hint text below the field (hidden when error is set)
required	boolean	false	Marks field as required
children	JSX.Element	required	The input element

Accessibility

• <label> associated via for/id (Ark UI Field handles this automatically)
• Error message linked via aria-describedby + aria-invalid
• Hint text linked via aria-describedby
• Error announced via role="alert"

Token Dependencies

Token	Source
--input-bg	--color-background-surface-alt
--input-border	--color-border-default
--input-border-focus	--color-accent-primary
--input-border-error	--color-status-error
--input-placeholder	--color-text-muted
--input-radius	--radius-md