Input

A short piece of text: a name, an amount, a search term.

import { Input } from "@hackcove/ui";

<Input
  prefix="R"
  inputMode="decimal"
  align="end"
  width="md"
  aria-label="Amount"
  defaultValue="49.90"
/>

import { Input } from "@hackcove/ui";

<Input placeholder="R 0.00" width="md" aria-label="Amount" />

import { Input } from "@hackcove/ui";

<Input
  type="search"
  aria-label="Search shops"
  placeholder="Search by name or suburb…"
  icon={
    <svg viewBox="0 0 20 20" fill="currentColor">
      <path
        fillRule="evenodd"
        d="M9 3.5a5.5 5.5 0 1 0 3.4 9.8l3.15 3.15a.75.75 0 1 0 1.06-1.06
          l-3.15-3.15A5.5 5.5 0 0 0 9 3.5Z
          m-4 5.5a4 4 0 1 1 8 0 4 4 0 0 1-8 0Z"
        clipRule="evenodd"
      />
    </svg>
  }
/>

import { Input } from "@hackcove/ui";

<Input aria-label="Search shops" placeholder="Search by name or suburb…" />

• Put an Input in a Field. Without one, name it with aria-label.
• A search box is type="search" with an icon; the clear button appears by itself.
• prefix is short text inside the border before the value, such as a currency symbol. It is for a plain field, not one with an icon or type="search". Pair it with align="end" and inputMode="decimal" for an amount.
• size="sm" is for a dense form or a table row.
• width is full by default; xs, sm, md and lg are fixed widths for a short value; fill grows to the room beside other items in a row; auto is as wide as the browser makes it.
• A paragraph is a Textarea; a choice from a list is a Select; a date is a DatePicker.

• An Input is a native <input>: it takes type, inputMode, autoComplete, required, disabled and the aria-* and data-* props.
• A type="search" field shows a "Clear search" button while it has a value; the button is labelled and is hidden when the field is disabled or read-only.
• The icon is decorative and hidden from assistive tech.
• The focus ring comes from the component.