Text field

stable

Single-line input with label, description, validation and adornments.

since v1.02.3 kB gzip

Preview

Code

Project name

Will deploy to aurora-docs.strata.app

Installation

CLI

Manual

npm

pnpm

bun

yarn

$ npx @strata/cli add text-field

Usage

React

Import only

import { TextField } from "@/components/strata";

<TextField
  label="Project name"
  description="Lowercase, no spaces."
  validate={(v) => (/\s/.test(v) ? "No spaces allowed" : null)}
/>

Props

Prop	Type	Default
`label` Visible label.	ReactNode	—
`description` Helper text below the input.	ReactNode	—
`isRequired` Marks the field required and validates on submit.	boolean	false
`validate` Custom validation returning an error message.	(value: string) => string \| null	—
`prefix` Icon or text before the input.	ReactNode	—
`isDisabled` Prevents interaction and dims the control.	boolean	false

Accessibility

Select

Pick one option from a list, with typeahead and sections.

Checkbox

Binary choice with indeterminate state and grouped variants.

Switch

Instant on/off setting, typically in settings lists.

Slider

Choose a value or range along a track, with steps and output.

Was this page helpful?

Documented since v1.0 · components/text-field.mdx