# Input

A single-line text field for collecting user input, with support for all HTML input types.

> For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md).





<ComponentThemeTabs>
  <ThemeTab name="mint">
    <PreviewWithCode name="input">
      <InputDemo />
    </PreviewWithCode>
  </ThemeTab>

  <ThemeTab name="berries">
    <PreviewWithCode name="input">
      <InputDemo />
    </PreviewWithCode>
  </ThemeTab>

  <ThemeTab name="citrine">
    <PreviewWithCode name="input">
      <InputDemo />
    </PreviewWithCode>
  </ThemeTab>

  <ThemeTab name="cinnamon">
    <PreviewWithCode name="input">
      <InputDemo />
    </PreviewWithCode>
  </ThemeTab>
</ComponentThemeTabs>

## Disabled [#disabled]

```tsx
<Input disabled placeholder="Not available" />
```

## Invalid [#invalid]

Set `aria-invalid` to apply the destructive ring and border. Pair with `Field` and `FieldError` for accessible error messages.

```tsx
<Input aria-invalid placeholder="Invalid value" />
```

## File [#file]

```tsx
<Input type="file" />
```

## With label [#with-label]

Use an HTML `<label>` or the `Field` compound component for accessible labelling.

```tsx
<div className="flex flex-col gap-1.5">
  <label htmlFor="email" className="text-sm font-medium">
    Email
  </label>
  <Input id="email" type="email" placeholder="you@example.com" />
</div>
```

## With Field [#with-field]

`Field` auto-wires the `htmlFor`/`id` association and surfaces error state.

```tsx
import { Field, FieldDescription, FieldError, FieldLabel, useField } from "@/components/ui/field";

function FieldInput(props: React.ComponentProps<typeof Input>) {
  const { id, error } = useField();
  return (
    <Input
      id={id}
      aria-invalid={!!error}
      aria-describedby={error ? `${id}-error` : `${id}-description`}
      {...props}
    />
  );
}

<Field error="Please enter a valid email.">
  <FieldLabel>Email</FieldLabel>
  <FieldInput type="email" placeholder="you@example.com" />
  <FieldError />
</Field>
```

## Props [#props]

<span className="block">
  All native 

  `<input>`

   props are accepted — 

  `type`

  , 

  `value`

  , 

  `defaultValue`

  , 

  `onChange`

  , 

  `disabled`

  , 

  `readOnly`

  , 

  `required`

  , 

  `placeholder`

  , 

  `autoComplete`

  , etc.
</span>

| Prop           | Notes                                                                                                  |
| -------------- | ------------------------------------------------------------------------------------------------------ |
| `type`         | Any valid HTML input type: `text`, `email`, `password`, `number`, `file`, `search`, `tel`, `url`, etc. |
| `aria-invalid` | Applies destructive border and ring styling                                                            |
| `disabled`     | Reduces opacity and blocks pointer events                                                              |
| `className`    | Merged after the component's own classes                                                               |

## Usage [#usage]

```tsx
import { Input } from "@/components/ui/input";

<Input type="email" placeholder="you@example.com" />
```

## Specs [#specs]

```md
# Mint — Input Specs

## Component
- name: input
- file: registry/mint/input.tsx
- installs to: components/ui/input.tsx
- dependencies: none (uses only @/lib/utils)
- registryDependencies: none

## What is it
A styled single-line text field wrapping the native `<input>` element. Use it to collect any freeform or structured text from users (email, password, search, number, etc.). Prefer pairing it with the `Field` compound component for accessible label and error wiring. Do not use for multi-line input — use a `<textarea>` instead.

## Visual identity
Transparent background with a soft green-tinted border (`--input`) gives the field a clean, minimal presence. A soft drop shadow (`shadow-xs`) adds subtle depth without visual weight. The standard border radius (`rounded-md`, 0.375rem) matches the Mint suite. In dark mode the field surface picks up a faint tint (`bg-input/30`) to remain legible against dark backgrounds.

## Design tokens
--input: oklch(0.88 0.04 155 / 60%) / oklch(0.32 0.05 155 / 40%)       — field border (light / dark)
--ring: oklch(0.5 0.14 155) / oklch(0.62 0.15 155)           — focus ring colour
--destructive: oklch(0.55 0.25 15) / oklch(0.704 0.191 22.216) — invalid border and ring
--muted-foreground: oklch(0.52 0.06 155) / oklch(0.6 0.06 155) — placeholder text
--foreground: oklch(0.145 0 0) / oklch(0.985 0 0)     — file input label text
--primary: oklch(0.5 0.14 155) / oklch(0.62 0.15 155)        — text selection background
--primary-foreground: oklch(1 0 0) / oklch(0.1 0 0) — text selection foreground

## States
- focus-visible: border switches to --ring, 3px ring at 50% opacity (ring-ring/50)
- disabled: opacity-50, pointer-events-none, cursor-not-allowed
- aria-invalid: border switches to --destructive; ring becomes destructive/20 (light) or destructive/40 (dark)
- placeholder: styled via placeholder:text-muted-foreground
- file type: file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium — removes default browser chrome and sizes the file button to match the field height

## Conventions
- Always pair with a visible `<label>` (htmlFor) or provide aria-label for accessibility
- Use the `Field` compound component to auto-wire id, aria-invalid, and aria-describedby
- Set aria-invalid={true} to trigger destructive border and ring — do not rely on CSS alone
- For prefix/suffix addons (icons, currency symbols, buttons), wrap in InputGroup with InputGroupText
- Sub-components expose data-slot="input" for CSS targeting by InputGroup selectors
- Height is fixed at h-9 (36px); padding is px-3 py-1 — do not override without design approval
- Text size is text-base on mobile, md:text-sm on md+ breakpoints
```

## Installation [#installation]

<CommandBox componentName="input" className="mt-2" />