TextField

TextFields allow users to enter and edit text. They support various input types, validation, and accessibility features.

Import

import { TextField } from '@proyecto-viviana/solid-spectrum';

A simple text input with a label.

Name

<TextField label="Name" placeholder="Enter your name" />

Control the input value with state.

Value: (empty)

const [value, setValue] = createSignal("");

<TextField
  label="Email"
  value={value()}
  onChange={setValue}
/>

Add helper text to provide additional context.

Username

Must be 3-20 characters, letters and numbers only

<TextField
  label="Username"
  description="Must be 3-20 characters, letters and numbers only"
/>

Display validation errors to the user.

Please enter a valid email address

<TextField
  label="Email"
  errorMessage="Please enter a valid email address"
  isInvalid
/>

Mark fields as required with visual indicator.

<TextField label="Email" isRequired />

Disabled fields cannot be edited.

Disabled field

<TextField label="Read-only field" isDisabled defaultValue="Cannot edit" />

Specify different input types for validation and mobile keyboards.

Password

Phone

<TextField label="Email" type="email" />
<TextField label="Password" type="password" />
<TextField label="Phone" type="tel" />

Use the filled visual variant for denser surfaces.

Display name

<TextField
  label="Display name"
  variant="filled"
  placeholder="Enter your display name"
/>

Prop	Type	Default	Description
`label`	string	—	Field label (required for accessibility)
`description`	string	—	Help text below the input
`errorMessage`	string	—	Error message to display
`value`	string	—	Input value (controlled)
`defaultValue`	string	—	Default value (uncontrolled)
`onChange`	(value: string) => void	—	Handler called when value changes
`placeholder`	string	—	Placeholder text
`type`	'text' \| 'email' \| 'password' \| 'tel' \| 'url' \| 'search'	`'text'`	Input type
`variant`	'outline' \| 'filled'	`'outline'`	Visual style variant
`isRequired`	boolean	`false`	Whether input is required
`isDisabled`	boolean	`false`	Whether input is disabled
`isReadOnly`	boolean	`false`	Whether input is read-only
`isInvalid`	boolean	—	Marks the field as invalid for styles and aria-invalid
`autoFocus`	boolean	`false`	Auto-focus on mount
`maxLength`	number	—	Maximum character length