Input

Usage

import { Field } from "@base-ui/react/field";
import { Input } from "@tulipfarm/sprout/input";

const [name, setName] = useState("");

<Field.Root invalid={!name.trim()}>
  <Field.Label>Agent name</Field.Label>
  <Input
    value={name}
    maxLength={120}
    placeholder="People Ops helper"
    onChange={(event) => setName(event.target.value)}
  />
  <Field.Error match>Enter a name.</Field.Error>
</Field.Root>

<label htmlFor="site">Site ID</label>
<Input id="site" aria-describedby="site-help" />

<Input scale="lg" type="email" placeholder="[email protected]" autoComplete="email" />

Input renders a native input and takes every input prop:value or defaultValue, onChange(or Base UI's onValueChange), ref,required, maxLength, pattern,autoComplete, inputMode, and event handlers such as onKeyDown and onPaste.

Props

scale is "default" (32px tall, 10px side padding, 14px text) or "lg" (44px, 12px padding, 16px text). Use lg for sign-in and onboarding forms.

type can be any native type. Cloud uses text, email, password, number, url, date, time, datetime-local, and file. A visible file input styles its button to match. A hidden file input (hidden, tabIndex={-1},aria-hidden) can be opened with ref.current.click().

disabled dims the input and blocks edits.readOnly keeps it focusable and selectable, which suits copy fields and saving states. aria-invalid draws a danger border and focus ring. The input sets data-slot="input" anddata-scale; you can pass your own data-slot andclassName to set it inside another control.

With a field

Input is a Base UI Input, so it works inside Base UIField.Root. The field gives it an id, labels it withField.Label, describes it with Field.Descriptionand Field.Error, and passes disabled andinvalid. Without a field, pair id with a label's htmlFor, or use aria-label.

SidebarInput

import { SidebarHeader, SidebarInput } from "@tulipfarm/sprout/sidebar";

<SidebarHeader>
  <SidebarInput aria-label="Search sample sidebar" placeholder="Search locally…" />
</SidebarHeader>

SidebarInput is a default-scale Input on the canvas color, withdata-slot="sidebar-input" anddata-sidebar="input".

Accessibility

Every input needs a name: a field label, a label withhtmlFor, or aria-label. Pointaria-describedby at help and error text. A focused input shows a 2px focus ring, red when invalid. Read-only inputs stay in the tab order; disabled ones leave it.

Color changes take 120ms and stop when reduced motion is requested. In forced colors mode the input keeps a system border and a highlight focus ring.

Theme tokens

The border uses --sprout-input, the fill--sprout-surface, text --sprout-text, and the placeholder --sprout-muted. Focus uses--sprout-focus, invalid --sprout-danger, and disabled --sprout-hover. Radius follows--sprout-radius-control. The opt-in TulipFarm theme tints the focus ring through these tokens.