# Input

> A text field built on Base UI's Field, which connects the label, help text and error message to the input. The border has a contrast of at least 3:1.

Facade UI item `input` (ui, atom).
Docs page: https://facadeui.dev/components/input · Registry JSON: https://facadeui.dev/r/input.json

## Install

```bash
npx shadcn@latest add @facade/input
```

Or by URL: `npx shadcn@latest add https://facadeui.dev/r/input.json`. The CLI also installs what it needs: @base-ui-components/react@1.0.0-rc.0, @facade/utils.

Files: `components/ui/input.tsx`

## Props

### InputProps

Extends Omit<ComponentPropsWithoutRef<"input">, "size">.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `label` (required) | `ReactNode` |  | Required. Use `hideLabel` if it should not be visible. |
| `hideLabel` | `boolean` | `false` | Hides the label visually but keeps it for screen readers. |
| `description` | `ReactNode` |  | Help text below the field. It is linked to the field for you. |
| `error` | `ReactNode` |  | Error message. Base UI links it to the field and announces it. |
| `trailing` | `ReactNode` |  | Shown inside the field at its end, such as a button or a unit. |
| `className` | `string` |  | Classes for the outer Field.Root. |
| `inputClassName` | `string` |  | Classes for the `<input>` itself. |