TextField

Single- or multi-line text input. The label, the description and the error are one component, wired together by Base UI's Field.

import { TextField } from 'neba';

<TextField label="Email" value={email} onChange={(event) => setEmail(event.target.value)} />;

Props

Prop	Type	Default	Description
variantshared	'solid' | 'outline' | 'text'	'outline'	Weight of the surface. Even solid is not flooded with colour — a field holds user data
sizeshared	'xs' | 'sm' | 'md' | 'lg' | 'xl'	'md'	Height and type scale. The same heights as Button, so a row's baseline holds
colorshared	'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info'	'primary'	Semantic colour role. The surface is white, so it reaches the edge, the focus ring and the caret
densityshared	'default' | 'compact'	'default'	Padding only — never the height, never the type scale
elevationshared	0 | 1 | 2 | 3	0	Drop shadow depth. A field is a well, not a surface that floats — rarely raised
label	ReactNode	—	Label above the control, wired to it by Base UI's Field
description	ReactNode	—	Helper text below the control
error	ReactNode	—	Error message below the control. Its presence also turns the field invalid
invalid	boolean	!!error	Forces the invalid state without a message, for when a form library owns validity
multiline	boolean	false	Renders a textarea instead of an input. Every other axis stays identical
rows	number	3	Visible rows in multiline mode
resize	'none' | 'vertical' | 'horizontal' | 'both'	'vertical'	Which way the user may drag it. Horizontal breaks a form's column
startIcon	ReactNode	—	Content before the control
endIcon	ReactNode	—	Content after the control
loading	boolean	false	Spinner in place of endIcon. Typing is deliberately still allowed
readOnly	boolean	false	Read-only. Selecting and copying still work
disabled	boolean	false	Unavailable
fullWidth	boolean	false	Stretches to the width of the container

Every native <input> attribute passes straight through. color and size are omitted because they collide with the ones above, and onChange is widened so the same handler types against a <textarea> in multiline mode.

Examples

Variants

Even solid is not flooded with the accent colour. What a field holds is user data, and a caret, a text selection and a placeholder all have to stay legible on top of it. The colour family shows up in the edge, the focus ring and the caret instead.

The sheet itself is white, and going outline → solid → hover → focus makes it more opaque, not more coloured. Colour has the whole rule.

import { TextField } from 'neba';

export default function TextFieldVariants() {
  return (
    <div className="grid w-full max-w-2xl grid-cols-1 gap-4 sm:grid-cols-3">
      <TextField variant="solid" label="solid" placeholder="Type here" fullWidth />
      <TextField variant="outline" label="outline" placeholder="Type here" fullWidth />
      <TextField variant="text" label="text" placeholder="Type here" fullWidth />
    </div>
  );
}

Sizes

The same heights as Button, so a field and a button in one row share a baseline.

import { Button, TextField } from 'neba';

const SIZES = ['xs', 'sm', 'md', 'lg', 'xl'] as const;

export default function TextFieldSizes() {
  return (
    <div className="flex flex-col gap-3">
      {SIZES.map((size) => (
        <div key={size} className="flex flex-wrap items-center gap-2">
          <TextField size={size} placeholder={`size ${size}`} />
          <TextField size={size} density="compact" placeholder="compact" />
          <Button size={size} variant="outline" color="secondary">
            Same height
          </Button>
        </div>
      ))}
    </div>
  );
}

Multiline

multiline renders a <textarea> and changes nothing else. rows={1} is exactly as tall as the single-line field. Horizontal resizing breaks a form's column, so only the vertical axis is on by default.

import { TextField } from 'neba';

export default function TextFieldMultiline() {
  return (
    <div className="grid w-full max-w-2xl grid-cols-1 gap-4 sm:grid-cols-2">
      <TextField
        multiline
        rows={1}
        label="rows 1"
        placeholder="Same height as an input"
        fullWidth
      />
      <TextField
        multiline
        rows={4}
        label="rows 4"
        description="Drag the corner — vertical only."
        fullWidth
      />
      <TextField
        multiline
        rows={3}
        resize="none"
        label='resize="none"'
        placeholder="A fixed box"
        fullWidth
      />
      <TextField
        multiline
        rows={3}
        variant="solid"
        label="solid"
        defaultValue={'Two lines of\nexisting content'}
        fullWidth
      />
    </div>
  );
}

Icons and progress

loading puts a spinner in the endIcon slot and marks the field busy, but typing is deliberately still allowed — a field is usually loading because of what was typed into it.

import { TextField } from 'neba';

function SearchIcon() {
  return (
    <svg viewBox="0 0 16 16" fill="none" aria-hidden="true">
      <circle cx="7" cy="7" r="4.25" stroke="currentColor" strokeWidth="1.5" />
      <path d="m10.5 10.5 3 3" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
    </svg>
  );
}

export default function TextFieldIcons() {
  return (
    <div className="grid w-full max-w-2xl grid-cols-1 gap-4 sm:grid-cols-2">
      <TextField startIcon={<SearchIcon />} placeholder="Search" fullWidth />
      <TextField loading defaultValue="Checking…" label="loading" fullWidth />
    </div>
  );
}

States

Give error any content and the whole field re-points at the danger family — edge, focus ring, caret and message all turn over together. To mark it invalid without a message, pass invalid directly.

import { TextField } from 'neba';

export default function TextFieldStates() {
  return (
    <div className="grid w-full max-w-2xl grid-cols-1 gap-4 sm:grid-cols-2">
      <TextField label="Normal" defaultValue="Value" fullWidth />
      <TextField label="Read-only" defaultValue="Value" readOnly fullWidth />
      <TextField label="Disabled" defaultValue="Value" disabled fullWidth />
      <TextField
        label="Invalid"
        defaultValue="not-an-email"
        error="Enter a valid address."
        fullWidth
      />
    </div>
  );
}

Controlled

value and onChange are the native ones.

import { useState } from 'react';
import { TextField } from 'neba';

export default function TextFieldControlled() {
  const [email, setEmail] = useState('');
  const valid = email === '' || /^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(email);

  return (
    <div className="w-full max-w-sm">
      <TextField
        label="Email"
        value={email}
        onChange={(event) => setEmail(event.target.value)}
        error={valid ? undefined : 'Enter a valid address.'}
        description={valid ? `${email.length} characters` : undefined}
        placeholder="[email protected]"
        fullWidth
      />
    </div>
  );
}

Accessibility

• Base UI's Field connects the label, description and error to the control with id and aria-describedby.
• There is no floating-label variant on purpose: floating labels need a transform, and controls in this library never transform.
• The focus ring belongs to the shell rather than the control inside it, so it traces the acrylic edge.
• Clicking the shell's own padding puts the caret in the field, the way a native <input> behaves.