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" />;
}