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.
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';34const [value, setValue] = useState('');56<TextField value={value} onChange={(e) => setValue(e.target.value)} />78<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 <TextField5 value={value}6 onChange={(e) => setValue(e.target.value)}7 placeholder="Type here…"8 />9 );10};1112render(<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);67render(<TextFieldWithFormField />);
Properties
TextField props
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | — | Additional class names to merge with the component root element |
invalid | boolean | false | Marks 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, …).