Textfield

Base UICopy Anchor Link

Textfield is the single-line text control for collecting a value. It mounts label, description, and error copy in the shared field layout, and optional startAddon / endAddon slots sit beside the control without becoming second fields.

Value, placeholder, disabled state, and validation pass through Base UI Field and Input, so you declare the whole row in JSX instead of hand-wiring labelled-by and error regions. Use fullWidth to span a form column (prefer that over inventing width: 100% CSS). fitContent grows the control inline with its value while block height stays fixed.

When to useCopy Anchor Link

• Single-line identifiers and short values (email, search, city)
• Fields that need label, helper, or validation beside a native input
• Prefix, glyph, or small action chrome via start/end addons
• Native date, time, or datetime-local when the browser picker is enough

When not to useCopy Anchor Link

• The value spans multiple lines → Textarea
• A numeric value with steppers → NumberField
• A closed list of named options in a popup → Select
• Type-to-filter or free-form suggestions → Autocomplete
• One-time or verification code slots → OTPField

RelatedCopy Anchor Link

• Textarea — multi-line bodies and notes
• NumberField — typed numbers with built-in steppers
• Fieldset — shared section legend for several fields
• Select — closed-choice dropdown
• Autocomplete — filterable or free-form suggestions
• OTPField — one-time and verification code slots

Common examplesCopy Anchor Link

Labeled fieldCopy Anchor Link

A labeled email with helper copy and Field validation is the baseline single-line input. Pair it with a submit button in a Stack; Textarea-style multi-line bodies belong on Textarea.

AddonsCopy Anchor Link

startAddon and endAddon decorate the shared control group — prefix text, a search glyph, or a small action. Buttons inside addons must use type="button" and typically size="s" so they do not submit parent forms.

Password revealCopy Anchor Link

For sign-in, put the visible name and a Forgot password link in a parent Stack row above the control, omit label on Textfield, and name the input with aria-label. Toggle type between password and text from an endAddon IconButton.

Form rowCopy Anchor Link

Equal-width city / ZIP pairs share a parent Stack with direction="row" and expandChildren — do not invent width CSS on each field. Stack full-width fields above the row for street and suite.

Date and timeCopy Anchor Link

Pass native type values that ship pickers in Chrome, Safari, and Firefox — date, time, and datetime-local. Skip month and week; those fall back to plain text in Safari and Firefox. Values use the browser’s ISO forms (YYYY-MM-DD, HH:MM, YYYY-MM-DDTHH:MM).

Fit contentCopy Anchor Link

fitContent sets field-sizing: content so the control grows inline with its value. Pair with readOnly and an endAddon copy action for share codes and clone URLs.

Ask your agentCopy Anchor Link

Build a sign-in email field with a short helper about magic links, inline validation after edit, and a Send magic link button under it.