Text Field

One component for the full .input-group markup: label (above/below/floating), prefix/suffix slots, helper/error/success text, and the built-in password-toggle / search-clear wiring.

Usage


import { TextField } from '@mav-labs-inc/mavkit-react'
 
<TextField label="Email" type="email" required />
 
<TextField label="Password" type="password" helperText="At least 8 characters" />
 
<TextField label="Amount" labelPosition="floating" prefix={<DollarIcon />} />
 
<TextField label="Email" errorText="Enter a valid email address" />

Examples

Basic

Password

At least 8 characters

Amount

Label position

Above (default)

Below

Floating

Helper, error, and success text

errorText takes priority over successText, which takes priority over helperText.

Username

That username is taken

Display name

Looks good

Bio(optional)

Shown on your public profile

Search

type="search" renders a built-in clear button once there’s a value (set clearable={false} to opt out).

Props

TextField accepts every native <input> attribute (except className, size, prefix, suffix, which are repurposed below) in addition to the props below.

Prop	Type	Default	Description
label	ReactNode	—	Field label. Omitting it renders an unlabelled control — pass aria-label yourself in that case.
labelPosition	'above' \| 'below' \| 'floating'	'above'	Where the label renders relative to the control. 'floating' overlays it inside the control until focused or filled.
required	boolean	—	Marks the field required — sets aria-required/required and appends a red asterisk to the label.
optional	boolean	—	Adds a muted "(optional)" hint to the label. Ignored when required is set.
helperText	ReactNode	—	Helper text shown below the control. Superseded by errorText/successText while either is set.
errorText	ReactNode	—	Error message — sets .is-error, aria-invalid, and a role="alert" message in place of the helper text.
successText	ReactNode	—	Success message — sets .is-success. Ignored while errorText is set.
prefix	ReactNode	—	Non-interactive icon/content rendered at the start of the control.
suffix	ReactNode	—	Non-interactive icon/content rendered at the end of the control. Ignored for type="password" and type="search" while their built-in buttons are showing.
passwordToggle	boolean	true	For type="password", render the built-in show/hide toggle.
clearable	boolean	true	For type="search", render the built-in clear button.
className	string	—	className for the outer .input-group.
inputClassName	string	—	className passed to the <input> (.input-control) itself.