TextField

A complete text input component with built-in label, description, error handling, and multiple sizes and colors.

Basic

Prop	Type	Default	Description
`label`	`string`	—	Label text displayed above the input.
`description`	`string`	—	Helper text displayed below the input.
`error`	`string`	—	Error message displayed below the input. Overrides description when set.
`required`	`boolean`	`false`	Marks the field as required with a visual indicator.
`color`	`"blue" \| "red" \| "green" \| "yellow" \| "purple" \| "neutral" \| string`	`"blue"`	Accent color for the focus ring.
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Size preset for the input.
`--mantle-bg`	`CSS variable`	`theme default`	Override the background color via style. e.g. style={{ "--mantle-bg": "#1a1a2e" }}
`--mantle-border`	`CSS variable`	`theme default`	Override the border color via style. Set to "transparent" to remove. e.g. style={{ "--mantle-border": "#e94560" }}
`--mantle-text`	`CSS variable`	`theme default`	Override the text color via style. e.g. style={{ "--mantle-text": "#ffffff" }}
`--mantle-ring`	`CSS variable`	`accent`	Override the focus ring color via style. e.g. style={{ "--mantle-ring": "#e94560" }}

label

string

Label text displayed above the input.

description

string

Helper text displayed below the input.

error

string

Error message displayed below the input. Overrides description when set.

requiredfalse

boolean

Marks the field as required with a visual indicator.

color"blue"

Accent color for the focus ring.

size"md"

"sm" | "md" | "lg"

Size preset for the input.

--mantle-bgtheme default

CSS variable

Override the background color via style. e.g. style={{ "--mantle-bg": "#1a1a2e" }}

--mantle-bordertheme default

CSS variable

Override the border color via style. Set to "transparent" to remove. e.g. style={{ "--mantle-border": "#e94560" }}

--mantle-texttheme default

CSS variable

Override the text color via style. e.g. style={{ "--mantle-text": "#ffffff" }}

--mantle-ringaccent

CSS variable

Override the focus ring color via style. e.g. style={{ "--mantle-ring": "#e94560" }}