Text Field

v0.4.1
Stable

A bare text input — the native `<input>` is this component's own root element. It has no built-in label/hint/error; wrap it in `FormField` for that chrome. Works standalone too — not every input needs the full form suite.

pnpm add @behivetech/atoms.text-field

This is the snapshot of v0.4.1, the current version, as recorded on 2026-11-10. The live page runs its examples →

A bare text input — the native <input> is this component's own root element. It has no built-in label/hint/error; wrap it in FormField for that chrome. Works standalone too — not every input needs the full form suite.

Usage

1import { TextField } from '@behivetech/atoms.text-field';
2import { FormField } from '@behivetech/forms.form-field';
3

4const [value, setValue] = useState('');
5

6<TextField value={value} onChange={(e) => setValue(e.target.value)} />
7

8<FormField label="Email" htmlFor="email" hint="We'll never share this">
9  <TextField id="email" type="email" />
10</FormField>

Pass invalid (adds the --invalid modifier and sets aria-invalid) to visually mark the field as invalid (pair with FormField's error prop for the message).

Examples

Open all 4 →
Basic Text Field
1const BasicTextField = () => {
2  const [value, setValue] = useState("");
3  return (
4    <TextField
5      value={value}
6      onChange={(e) => setValue(e.target.value)}
7      placeholder="Type here…"
8    />
9  );
10};
11

12render(<BasicTextField />);
Text Field With Form Field
1const TextFieldWithFormField = () => (
2  <FormField label="Email" htmlFor="email" hint="We'll never share this">
3    <TextField id="email" type="email" placeholder="you@example.com" />
4  </FormField>
5);
6

7render(<TextFieldWithFormField />);

Properties

TextField props

PropTypeDefaultDescription
classNamestring—Additional class names to merge with the component root element
invalidbooleanfalseMarks the field as invalid: adds the `--invalid` modifier and sets `aria-invalid="true"`

Also accepts the native attributes of its root element (className, aria-*, event handlers, …).