Skip to content
Yuzur1ha Open

Component referenceDraft

Input

Input is the unlabelled field primitive. Pair it with a visible label or compose it with FormControl.

Updated

Design notes

Use TextField when label, hint and error belong to one compact field. Do not nest TextField inside FormField.

Playground

Playgrounddemo.tsx

TextField owns its label and help text.

FormField owns the label, description and validation.

content/components/input/demo.tsx

import {
  Input,
  Form,
  FormField,
  FormLabel,
  FormControl,
  FormDescription,
  TextField,
} from "@yuzur1ha/ui"
export function InputDemo() {
  return (
    <>
      <TextField
        label="Standalone field"
        hint="TextField owns its label and help text."
        placeholder="A complete field"
      />
      <div className="demo-row">
        {(["small", "medium", "large"] as const).map((size) => (
          <TextField
            key={size}
            size={size}
            label={`${size} field`}
            placeholder="Enter a value"
          />
        ))}
      </div>
      <Form>
        <FormField name="composed">
          <FormLabel>Composed field</FormLabel>
          <FormControl asChild>
            <Input placeholder="A bare input inside FormField" />
          </FormControl>
          <FormDescription>
            FormField owns the label, description and validation.
          </FormDescription>
        </FormField>
      </Form>
    </>
  )
}

API

Input

Unlabelled native input. Use with FormLabel/FormControl or an accessible name. size controls visual dimensions; htmlSize is the native character-width hint.

InputProps
PropertyTypeRequiredDefaultDescription
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 input type; the browser defaults to text.
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-labelstringNo—Accessible name when a visible label does not already name the element.
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—DOM identifier for the rendered element.
refRef<HTMLInputElement>No—Ref to the component’s documented DOM element.

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