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.
Examples of v0.4.0 are shown as code; only the latest version runs live. Open the live examples →
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 />);
Text Field With Error
1const TextFieldWithError = () => (2 <FormField3 label="Email"4 htmlFor="email-error"5 error="A valid email is required"6 >7 <TextField id="email-error" type="email" invalid />8 </FormField>9);1011render(<TextFieldWithError />);
Disabled Text Field
1const DisabledTextField = () => (2 <TextField disabled value="Can't touch this" />3);45render(<DisabledTextField />);