Input

A text input component with support for labels, helper text, error states, icons, and multiple sizes.

Basic

Prop	Type	Default	Description
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Size preset for the input.
`color`	`"blue" \| "red" \| "green" \| "yellow" \| "purple" \| "neutral" \| string`	`"blue"`	Accent color for focus ring.
`label`	`string`	—	Label text displayed above the input.
`helperText`	`string`	—	Helper text displayed below the input.
`error`	`string`	—	Error message displayed below the input. Overrides helperText.
`startIcon`	`ReactNode`	—	Element placed at the start of the input.
`endIcon`	`ReactNode`	—	Element placed at the end of the input.
`placeholder`	`string`	—	Placeholder text shown when the input is empty.
`disabled`	`boolean`	`false`	Disables 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" }}

size"md"

"sm" | "md" | "lg"

Size preset for the input.

color"blue"

Accent color for focus ring.

label

string

Label text displayed above the input.

helperText

string

Helper text displayed below the input.

error

string

Error message displayed below the input. Overrides helperText.

startIcon

ReactNode

Element placed at the start of the input.

endIcon

ReactNode

Element placed at the end of the input.

placeholder

string

Placeholder text shown when the input is empty.

disabledfalse

boolean

Disables 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" }}