Forms

Input

A single-line text field. Inside a Field it picks up its id, label, description and error automatically. All native input props are passed to the <input>; the ref points at it too.

⌘K

Small

demos/input.tsx

import { Field } from "pixelbits/field";
import { Input } from "pixelbits/input";

const Search = () => (
  <svg
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    strokeWidth="1.5"
    aria-hidden="true"
  >
    <circle cx="11" cy="11" r="7" />
    <path d="m20 20-3.5-3.5" />
  </svg>
);

export default function Demo() {
  return (
    <div className="grid w-full max-w-sm gap-4">
      <Field label="Search">
        <Input
          start={<Search />}
          end={<kbd className="font-pb-mono text-[0.6875rem]">⌘K</kbd>}
          placeholder="Search components"
        />
      </Field>
      <Field label="Small">
        <Input size="sm" placeholder="Compact" />
      </Field>
    </div>
  );
}

Installation

npm: import

import { Input } from "pixelbits/input";

shadcn: copy the source

npx shadcn add https://pixelbits.ali-moradi-develop.com/r/input.json

API

<Input>

A single-line text field. Inside a Field it picks up its id, label, description and error automatically. All native input props are passed to the <input>; the ref points at it too.

Example

<Field label="Search">
  <Input start={<SearchIcon />} end={<kbd>⌘K</kbd>} placeholder="Search components" />
</Field>

Prop	Type	Default	Description
size	"sm" \| "md" \| "lg"	"md"	Height: `"sm"` 32 px, `"md"` 40 px, `"lg"` 48 px.
start	ReactNode	—	Content before the text, usually an icon (e.g. a search glass).
end	ReactNode	—	Content after the text: an icon, a unit, a `kbd` hint or a small button.
frameClassName	string	—	Classes for the outer frame (the `className` prop goes to the `<input>`).

Also accepts every prop of Omit<InputHTMLAttributes<HTMLInputElement>, "size">.