Input

A field for a single line of text, with prefix and suffix addons.

Sizes

The default size is sm (36px). md is 40px. Both keep text-sm.

Secondary

Primary (neutral-100) is the default. Use secondary, white with a shadow, when the input sits on a neutral panel.

import {
  Input,
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
  SearchIcon,
} from "@smallest-inc/ui";

export default function InputSecondary() {
  return (
    <div className="flex w-full max-w-xs flex-col gap-4">
      <Input variant="secondary" aria-label="Agent name" placeholder="Support agent" />
      <InputGroup variant="secondary">
        <InputGroupAddon>
          <SearchIcon />
        </InputGroupAddon>
        <InputGroupInput aria-label="Search agents" placeholder="Search agents" />
      </InputGroup>
    </div>
  );
}

With label

Connect a visible Label with htmlFor and id. Use Field when the input also needs a description or error.

Agent name

Prefix and suffix

Compose an InputGroup with InputGroupAddon. Icons and text are muted and inset with no divider; an interactive icon uses InputGroupButton with an aria-label.

⌘K

https://

import {
  CircleInfoIcon,
  CopyIcon,
  GlobeIcon,
  InputGroup,
  InputGroupAddon,
  InputGroupButton,
  InputGroupInput,
  InputGroupText,
  SearchIcon,
} from "@smallest-inc/ui";

export default function InputPrefixSuffix() {
  return (
    <div className="flex w-full max-w-xs flex-col gap-4">
      <InputGroup>
        <InputGroupAddon>
          <SearchIcon />
        </InputGroupAddon>
        <InputGroupInput aria-label="Search agents" placeholder="Search agents" />
        <InputGroupAddon align="inline-end">
          <InputGroupText>⌘K</InputGroupText>
        </InputGroupAddon>
      </InputGroup>
      <InputGroup>
        <InputGroupAddon>
          <GlobeIcon />
        </InputGroupAddon>
        <InputGroupInput aria-label="Webhook domain" placeholder="example.com" />
        <InputGroupAddon align="inline-end">
          <InputGroupButton aria-label="About webhook domains">
            <CircleInfoIcon />
          </InputGroupButton>
        </InputGroupAddon>
      </InputGroup>
      <InputGroup>
        <InputGroupAddon>
          <InputGroupText>https://</InputGroupText>
        </InputGroupAddon>
        <InputGroupInput aria-label="Callback URL" placeholder="api.example.com/calls" />
      </InputGroup>
      <InputGroup>
        <InputGroupInput aria-label="Agent ID" defaultValue="agt_8f2k41x9" readOnly />
        <InputGroupAddon align="inline-end">
          <InputGroupButton aria-label="Copy agent ID">
            <CopyIcon />
          </InputGroupButton>
        </InputGroupAddon>
      </InputGroup>
    </div>
  );
}

Disabled

import {
  Input,
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
  SearchIcon,
} from "@smallest-inc/ui";

export default function InputDisabled() {
  return (
    <div className="flex w-full max-w-xs flex-col gap-4">
      <Input disabled aria-label="Phone number" defaultValue="+1 415 555 0132" />
      <InputGroup>
        <InputGroupAddon>
          <SearchIcon />
        </InputGroupAddon>
        <InputGroupInput disabled aria-label="Search calls" placeholder="Search calls" />
      </InputGroup>
    </div>
  );
}

Error

Leave the field to validate. Becoming invalid shakes the control once and eases FieldError open; fix the address to clear it. In an InputGroup, add InputGroupInvalidIndicator at the end.

Notification email

Enter a valid email address.

import { useState } from "react";
import {
  Field,
  FieldError,
  FieldLabel,
  Input,
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
  InputGroupInvalidIndicator,
} from "@smallest-inc/ui";

const EMAIL = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

function isInvalid(value: string) {
  const next = value.trim();
  return next !== "" && !EMAIL.test(next);
}

export default function InputError() {
  const [invalid, setInvalid] = useState(true);

  return (
    <div className="flex w-full max-w-xs flex-col gap-6">
      <Field invalid={invalid} touched={invalid}>
        <FieldLabel>Notification email</FieldLabel>
        <Input
          defaultValue="ops@smallest"
          placeholder="you@example.com"
          onChange={(event) => {
            if (invalid && !isInvalid(event.currentTarget.value)) setInvalid(false);
          }}
          onBlur={(event) => setInvalid(isInvalid(event.currentTarget.value))}
        />
        <FieldError match={invalid}>Enter a valid email address.</FieldError>
      </Field>
      <InputGroup>
        <InputGroupInput aria-label="Caller ID" aria-invalid defaultValue="+1 415 555" />
        <InputGroupAddon align="inline-end">
          <InputGroupInvalidIndicator />
        </InputGroupAddon>
      </InputGroup>
    </div>
  );
}

Best practices

When to use

Use for single-line free-form values such as agent names, domains, phone numbers, and API tokens.
Use Textarea for multi-line content, Combobox for filterable known values, and Select for short fixed choices.

Behavior

Keep variant primary (neutral-100) by default, including inside lists. Use variant="secondary" only when the input sits on a neutral panel.
Use size sm (36px) in forms and toolbars; use md (40px) for prominent single-field surfaces such as a search page.
Validate on blur or submit, not on every keystroke. Becoming invalid shakes the control once (6px / −6px / 4px over 280ms) and fades in the danger ring; put the message in FieldError. Reduced motion keeps the ring and message and drops the shake.
Compose icons, text prefixes such as “https://”, and shortcuts with InputGroup and InputGroupAddon. Interactive affordances such as copy or clear use InputGroupButton.
Use readOnly, not disabled, for values people need to select and copy, such as an agent ID.

Content

Use a short sentence-case label such as “Agent name” and an example placeholder such as “example.com”, not an instruction sentence.
Do not use the placeholder as the label; it disappears as soon as someone types.

Accessibility

Every input needs a visible Label or FieldLabel. Use aria-label only when the purpose is obvious from context, such as a search field with a search icon.
Give each InputGroupButton an aria-label that names the action and its target, such as “Copy agent ID”.

PreviousHover Card NextLabel