Text field

import { TextField } from "@brijbyte/md3-react/text-field";

@import "@brijbyte/md3-react/text-field.css";

Variants

Filled and outlined fields share the same anatomy and props — only the container styling differs. The floating label, disabled state, and every color transition come from Base UI's Field under the hood, so there's no extra state to wire up.

Single line

The common case: a label, an input, nothing else.

Adjacent label

Skip the label prop to render a plain field with no floating label, and pair it with an ordinary external <label> you place and associate yourself (htmlFor/id) — useful for form layouts where the label sits above or beside the field instead of inside it.

Auto-expanding multi-line

Set multiline to render a <textarea> that grows with its content instead of scrolling.

Prefix and suffix

Fixed text can sit before or after the input value — a currency symbol, a protocol, a unit.

Icons

leadingIcon and trailingIcon are plain slots. Compose trailingIcon with IconButton for a clear button or a password visibility toggle.

Errors

The error prop switches the label, indicator/outline, and supporting text to the error palette in one step.

Form validation

Native constraints (required, type="email", …) get the same styling for free. Pass Field.Error elements as supportingText to show constraint-specific messages — they render inside the field's own Field.Root, so no extra wiring is needed.

import { Field } from "@base-ui/react/field";