TextBox, Asgard Docs

Inputs & forms

Capture a line of text.

TextBox is a versatile text input supporting validation, icons, multiline editing, and password masking.

Key features:

Variants: outlined and underline with three sizes
Left/right icons and semantic coloring
multiline mode with optional autoExtend
Password mask modes: strong (instant) and smooth (brief reveal)
Validation via regex with hintText feedback

Loading preview…

When to use it

Names, emails, search boxes
Form fields with validation (semantic + hint)
Inputs with a leading or trailing icon
Passwords, numbers with spinners, masked and multiline fields

Properties

Prop	Type	Default	Description
`value`	`string`	—	The current text value of the input.
`onChange`	`(value: string) => void`	—	Callback fired when the input value changes. The handler receives the new value directly, NOT a DOM event (write onChange={(v) => setX(v)}, not e.target.value).
`placeholder`	`string`	—	Placeholder text displayed when the input is empty.
`placeholderBehavior`	`'float' \| 'disappear'`	`'float'`	How the placeholder renders. "float" (default) shows it as a floating <label>, so the actual <input> has an empty placeholder="" attribute (when inspecting/testing the HTML, look for the label text, not the input placeholder). "disappear" renders a plain native input placeholder that clears on input.
`size`	`'small' \| 'normal' \| 'large'`	`'normal'`	Controls the overall size of the text input.
`variant`	`'underline' \| 'outlined'`	`'outlined'`	Visual style variant for the input border.
`semantic`	`'primary' \| 'secondary' \| 'success' \| 'warning' \| 'error' \| 'info'`	—	Applies a semantic color theme to the input.
`multiline`	`boolean`	`false`	When true, renders a textarea instead of a single-line input.
`mask`	`'none' \| 'strong' \| 'smooth'`	`'none'`	Password masking mode. Strong hides immediately, smooth reveals briefly before masking.

Notes

The placeholder supports both float and disappear behaviors depending on the variant.
When multiline is true, the autoExtend prop can make the textarea grow with content.
Mask modes control password visibility: "strong" hides characters instantly while "smooth" briefly reveals each character before masking.

Presets