Input

Displays a form input field or a component that looks like an input field.

import { Input } from "@smartacteam/ambient-web/input";

export function InputDemo() {
  return <Input.Text type="email" placeholder="Email" />;
}

Usage

import { Input } from "@smartacteam/ambient-web/input";

<Input.Text />
<Input.Numeric />
<Input.Pattern />

Examples

Sizes

import { Input } from "@smartacteam/ambient-web/input";

export function InputSizesDemo() {
  return (
    <div className="flex w-full flex-col gap-8">
      <div className="flex items-center gap-8">
        <Input.Text type="email" size="default" placeholder="Email" />
        <Input.Text type="email" size="lg" placeholder="Email" />
      </div>
    </div>
  );
}

Numeric

import { Input } from "@smartacteam/ambient-web/input";

<Input.Numeric />

import { Input } from "@smartacteam/ambient-web/input";

export function InputDemo() {
  return (
    <Input.Numeric
      prefix="$ "
      decimalScale={2}
      thousandSeparator
      placeholder="Amount"
      thousandsGroupStyle="thousand"
    />
  );
}

Pattern

import { Input } from "@smartacteam/ambient-web/input";

<Input.Pattern />

import { Input } from "@smartacteam/ambient-web/input";

export function InputDemo() {
  return <Input.Pattern format="(###) ###-####" placeholder="Phone number" />;
}

Autofill

An input with no autocomplete token asks browsers and password managers to leave it alone: it renders autoComplete="off" and the 1Password, Bitwarden, and LastPass ignore attributes. These are requests each browser and manager honors on its own terms, and a manager outside those three reads none of them. The default suits a field holding someone else's details: a customer, an invitee, a company record, a search box.

A field that holds the signed-in user's own details names its token, and renders that token alone:

<Input.Text type="tel" autoComplete="tel" />
<Input.Text autoComplete="given-name" />
<Input.Text type="password" autoComplete="current-password" />

An input the package does not render spreads autofillAttributes() from @smartacteam/ambient-web/input.