ComponentsUpdated Sep 9, 2026

Input

A single-line text field. Thin wrapper over Base UI Input so native attributes, refs, and form integration all work as expected.

Import

Source: packages/ui/src/components/input

tsx

import { Input, inputStyles } from '@highlight/ui'

Basic

tsx

import { Input } from '@highlight/ui'

export default function InputBasic() {
  return (
    <div className="flex w-72 flex-col gap-3">
      <Input placeholder="Search meetings…" />
      <Input defaultValue="Weekly design sync" />
      <Input placeholder="Disabled" disabled />
    </div>
  )
}

In a form

Labels, autocomplete, and inputmode come from the consumer. Placeholders end with an ellipsis.

tsx

import { Input } from '@highlight/ui'

export default function InputLabelled() {
  return (
    <form className="flex w-72 flex-col gap-4" onSubmit={(event) => event.preventDefault()}>
      <div className="flex flex-col gap-1.5">
        <label htmlFor="input-name" className="text-foreground/70 text-[13px] font-medium">
          Display name
        </label>
        <Input id="input-name" name="name" autoComplete="name" placeholder="Ada Lovelace…" />
      </div>
      <div className="flex flex-col gap-1.5">
        <label htmlFor="input-email" className="text-foreground/70 text-[13px] font-medium">
          Work email
        </label>
        <Input
          id="input-email"
          name="email"
          type="email"
          inputMode="email"
          spellCheck={false}
          placeholder="ada@company.com…"
        />
        <p className="text-foreground/50 text-xs">We only use this for meeting invites.</p>
      </div>
    </form>
  )
}

Notes

inputStyles is the class string, exported so Combobox.Input and custom fields can match it exactly.