Lenso UI

Foundation component · Forms

Text Field

Collect a short, structured value with a persistent label and inline validation.

Live playground

Optional supporting text.

Choose Text Field when

  • People enter a short value such as a name, URL, or search query.
  • Use Text Area for multi-line prose and Combobox for a searchable known option set.
  • Keep the visible label even when placeholder copy provides an example.

Validation and actions

  • Use Description for format guidance and Error for a specific correction.
  • Prefer read-only when the value should remain selectable; use disabled only when it is unavailable.
  • Give Clear a task-specific accessible name and hide decorative icons.

Implementation

Root connects the label, description, error, and control while preserving native input props.

import { TextField } from "@lenso/ui/text-field";

<TextField.Root>
  <TextField.Label>Project name</TextField.Label>
  <TextField.Control placeholder="Untitled" />
  <TextField.Description>Visible to your team.</TextField.Description>
</TextField.Root>;

Implementation

Compose search from the same Text Field parts; no separate Search Field component is needed.

import { useState } from "react";
import { SearchIcon } from "lucide-react";
import { TextField } from "@lenso/ui/text-field";

function SettingsSearch() {
  const [query, setQuery] = useState("");

  return (
    <TextField.Root size="compact">
      <TextField.Label>Search settings</TextField.Label>
      <TextField.InputGroup>
        <TextField.Leading>
          <SearchIcon aria-hidden="true" size={14} />
        </TextField.Leading>
        <TextField.Control
          onValueChange={setQuery}
          placeholder="Search…"
          type="search"
          value={query}
        />
        {query ? (
          <TextField.Trailing>
            <TextField.Clear aria-label="Clear settings search" onClear={() => setQuery("")} />
          </TextField.Trailing>
        ) : null}
      </TextField.InputGroup>
    </TextField.Root>
  );
}
Lenso UI