TextInput

A labeled <input> element with optional description, error message, and asterisk indicator. Supports all standard HTML input types via the type prop.

Default

<TextInput label="Your name" placeholder="Enter your name" />

With description and error

We'll never share your email.

Username is already taken.

<TextInput
  label="Email"
  description="We'll never share your email."
  placeholder="your@email.com"
  type="email"
/>
<TextInput
  label="Username"
  withAsterisk
  error="Username is already taken."
/>

Input types

<TextInput label="Email" type="email" placeholder="email@example.com" />
<TextInput label="Password" type="password" />
<TextInput label="Number" type="number" />

Sizes

<TextInput size="xs" label="xs" />
<TextInput size="sm" label="sm" />
<TextInput size="md" label="md" />
<TextInput size="lg" label="lg" />
<TextInput size="xl" label="xl" />

Disabled

<TextInput label="Disabled" disabled value="Cannot be changed" />

Props

PropTypeDefaultDescription
idstring—Associates label with input via HTML for/id
labelReactNode—Label rendered above the input
descriptionReactNode—Helper text below the label
errorReactNode|boolean—Error message; pass true for styles only
requiredboolean—Marks as required and adds asterisk
withAsteriskboolean—Adds asterisk without native required attribute
disabledboolean—Disables the input
size'xs'|'sm'|'md'|'lg'|'xl'—Font size and height via design tokens
radius'xs'|'sm'|'md'|'lg'|'xl'|string—Border-radius of the input
typestring'text'HTML input type attribute
placeholderstring—Placeholder text
valuestring—Pre-fills the input (uncontrolled SSR)
namestring—Form field name
classstring—Additional CSS class names
styleobject—Inline styles