Field

Playground

Installation

pnpm add @tessinaui/ui

Usage

import { Field, FieldDropdown, FieldDropdownItem } from "@tessinaui/ui";
import { Button } from "@tessinaui/ui";

<Field label="Email" placeholder="you@example.com" />

Three label layout variants are available via labelPosition:

• "outside-top" (default) — label above the field
• "inside" — label inside the container above the placeholder text
• "outside-left" — label to the left of the field (horizontal layout)

Examples

Default

The simplest field — a label paired with a placeholder.

Intents

Five validation states — none, error, warning, success, and info — each recoloring the border, focus ring, and supporting text.

Sizes

Five heights from xs to xl, scaling padding and text proportionally.

Icons & Clearable

Add a leading or trailing icon, or a clear button that appears when the field has a value.

Prefix & Suffix

Use <FieldDropdown> as a prefix and <Button> as a suffix, sharing the field's size and rounded.

Disabled

A disabled field mutes the surface and prevents interaction.

API Reference

Props

All other native <input> attributes (type, name, autoComplete, etc.) are forwarded.

With Prefix & Suffix

Use <FieldDropdown> for the prefix (country selector, currency picker) and <Button> for the suffix. Pass the same size and rounded values to all three so they share identical border radius and height:

import { Field, FieldDropdown } from "@tessinaui/ui";
import { Button } from "@tessinaui/ui";

<Field
  label="Phone"
  placeholder="Enter number"
  rounded="full"
  size="md"
  prefix={
    <FieldDropdown
      flag="si"
      text="SLO(+386)"
      size="md"
      rounded="full"
    />
  }
  suffix={
    <Button size="sm" rounded="full">
      Verify
    </Button>
  }
/>

FieldDropdown props

Controlled Usage

const [value, setValue] = useState("");

<Field
  label="Search"
  value={value}
  onChange={(e) => setValue(e.target.value)}
  clearable
  onClear={() => setValue("")}
  showCharacterCounter
  maxLength={100}
/>

Label Variants

{/* Inside — label floats above input text inside the container */}
<Field labelPosition="inside" label="Email" placeholder="you@example.com" />

{/* Outside left — horizontal layout, label column on the leading side */}
<Field labelPosition="outside-left" label="Email" placeholder="you@example.com" />

RTL

Pass dir="rtl" to flip the full layout including the label row, input icons, prefix/suffix, and supporting text. Works with all labelPosition variants:

<Field dir="rtl" label="بحث" placeholder="نص العنصر النائب" leadingIcon={<Search />} />
<Field dir="rtl" labelPosition="outside-left" label="البريد" placeholder="you@example.com" />

Accessibility

• The <input> is associated with its <label> via a generated (or provided) id/htmlFor pair
• aria-required is set when required={true}
• aria-invalid is set when intent="error"
• The clear button has aria-label="Clear" and is excluded from tab order (tabIndex={-1})
• Touch target for the clear button: ≥ 44×44 px
• Focus ring appears on the container (not the inner input) via focus-within:ring-*
• Color contrast: all intent states meet WCAG 2.1 AA