Skip to content
Yuzur1ha Open

Component referenceDraft

Text field

TextField keeps a label, input, hint and error together for common forms.

Updated

Design notes

Use Input with FormField when validation and descriptions need independent composition. Avoid duplicate labels and error announcements.

Design sourceOpen in Figma

Text field design

Inspect the original component, variants and visual details.

Playground

Playgrounddemo.tsx

Use a name people recognize.

This username is unavailable.

Alex Morgan

content/components/text-field/demo.tsx

import { useState } from "react"
import { TextField } from "@yuzur1ha/ui"
import { DemoResult } from "../../examples/result"

export function FieldDemo() {
  const [value, setValue] = useState("Alex Morgan")
  return (
    <>
      <TextField
        label="Display name"
        type="text"
        value={value}
        onChange={(event) => setValue(event.target.value)}
        hint="Use a name people recognize."
        autoComplete="nickname"
      />
      <TextField
        label="Username"
        defaultValue="alex"
        error="This username is unavailable."
      />
      <TextField label="Disabled" value="alex@example.test" disabled />
      <DemoResult>{value}</DemoResult>
    </>
  )
}

API

TextField

A labelled Input with linked hint/error text. Native input attributes, className and ref target the Input. In FormField, compose FormLabel + FormControl + Input instead.

TextFieldProps
PropertyTypeRequiredDefaultDescription
labelstringYes—Visible label and accessible name.
hintstringNo—Supporting field guidance, associated with the control.
errorstringNo—Error message. Replaces hint text and marks the field invalid.
sizeComponentSizeNo"medium"Visual size: small, medium or large.
htmlSizenumberNo—Native input size attribute, measured as an approximate character width; does not select the visual component size.
typeHTMLInputTypeAttributeNo—Native control type.
valuestring | number | readonly string[]No—Current native control value. Pair with onChange for controlled input.
defaultValuestring | number | readonly string[]No—Initial value used when the native control is uncontrolled.
onChangeChangeEventHandler<HTMLInputElement, HTMLInputElement>No—Native input change handler. Read value or checked from event.currentTarget.
disabledbooleanNo—Disables the native control.
requiredbooleanNo—Requires a non-empty native control value during form validation.
readOnlybooleanNo—Keeps the current value readable and focusable while preventing editing.
namestringNo—Native form submission field name.
placeholderstringNo—Text shown when the control has no value.
autoCompleteHTMLInputAutoCompleteAttributeNo—Native browser autocomplete hint.
maxLengthnumberNo—Maximum input length enforced by the browser.
aria-invalidboolean | "true" | "false" | "grammar" | "spelling"No—Marks the native control invalid for assistive technology.
aria-describedbystringNo—IDs of additional descriptive elements; field components merge these with their hint or error ID.
classNamestringNo""Additional classes applied to the component’s documented root or control.
idstringNo—Native control ID. Generated when omitted; the visible label and supporting text use this association.
refRef<HTMLInputElement>No—Ref to the component’s documented DOM element.

No custom imperative methods. Event callbacks are listed as properties.