---
title: Input
description: "Displays a form input field."
---

```tsx
import * as stylex from '@stylexjs/stylex';

import { container } from '@/lib/constants.stylex';

import { Input } from '@/components/ui/input';

export default function InputDemo() {
  return (
    <div {...stylex.props(styles.wrap)}>
      <Input placeholder="Email" type="email" />
    </div>
  );
}

const styles = stylex.create({
  wrap: {
    width: container.md,
  },
});
```

## Install

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

## Usage

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

<Input placeholder="Email" type="email" />
```

## With label

```tsx
import * as stylex from '@stylexjs/stylex';

import { Input } from '@/components/ui/input';
import { space, fontSize, fontWeight, container } from '@/lib/constants.stylex';
import { colors, font } from '@/lib/tokens.stylex';

export default function InputWithLabel() {
  return (
    <div {...stylex.props(styles.field)}>
      <label htmlFor="email" {...stylex.props(styles.label)}>
        Email
      </label>
      <Input id="email" placeholder="you@example.com" type="email" />
    </div>
  );
}

const styles = stylex.create({
  field: {
    display: 'flex',
    flexDirection: 'column',
    gap: space.s15,
    width: container.md,
  },
  label: {
    color: colors.foreground,
    fontFamily: font.sans,
    fontSize: fontSize.sm,
    fontWeight: fontWeight.medium,
  },
});
```

## Disabled

```tsx
import * as stylex from '@stylexjs/stylex';

import { container } from '@/lib/constants.stylex';

import { Input } from '@/components/ui/input';

export default function InputDisabled() {
  return (
    <div {...stylex.props(styles.wrap)}>
      <Input placeholder="Disabled" disabled />
    </div>
  );
}

const styles = stylex.create({
  wrap: {
    width: container.md,
  },
});
```

## Invalid

Set `invalid` on `Field` to show validation errors — the label and error message pick up the invalid styling, and `aria-invalid` is applied to the input automatically.

```tsx
import * as stylex from '@stylexjs/stylex';

import { Field, FieldError, FieldLabel } from '@/components/ui/field';
import { Input } from '@/components/ui/input';
import { container } from '@/lib/constants.stylex';

export default function InputInvalid() {
  return (
    <Field invalid style={styles.root}>
      <FieldLabel htmlFor="input-invalid-email">Email</FieldLabel>
      <Input
        id="input-invalid-email"
        type="email"
        defaultValue="not-an-email"
      />
      <FieldError>Please enter a valid email address.</FieldError>
    </Field>
  );
}

const styles = stylex.create({
  root: {
    width: container.sm,
  },
});
```

## File

Use `type="file"` to create a file input.

```tsx
import * as stylex from '@stylexjs/stylex';

import { Field, FieldLabel } from '@/components/ui/field';
import { Input } from '@/components/ui/input';
import { container } from '@/lib/constants.stylex';

export default function InputFile() {
  return (
    <Field style={styles.root}>
      <FieldLabel htmlFor="input-file-picture">Picture</FieldLabel>
      <Input id="input-file-picture" type="file" />
    </Field>
  );
}

const styles = stylex.create({
  root: {
    width: container.sm,
  },
});
```

## With button

Pair `Input` with `Button` inside a `Field` for a search-style input.

```tsx
import * as stylex from '@stylexjs/stylex';

import { Button } from '@/components/ui/button';
import { Field, FieldLabel } from '@/components/ui/field';
import { Input } from '@/components/ui/input';
import { container, space } from '@/lib/constants.stylex';

export default function InputWithButton() {
  return (
    <Field style={styles.root}>
      <FieldLabel htmlFor="input-with-button-search">Search</FieldLabel>
      <div {...stylex.props(styles.row)}>
        <Input id="input-with-button-search" placeholder="Search…" />
        <Button type="submit">Search</Button>
      </div>
    </Field>
  );
}

const styles = stylex.create({
  root: {
    width: container.md,
  },
  row: {
    display: 'flex',
    gap: space.s2,
  },
});
```

## API reference

Built on [Base UI Input](https://base-ui.com/react/components/input). The tables below cover the props this library adds or changes — every other prop is forwarded to the underlying Base UI part; see the [Base UI Input API reference](https://base-ui.com/react/components/input#api-reference) for the full list.

### Input

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `disabled` | `boolean` | `false` |  |
| `style` | `StyleXStyles` | — | StyleX styles merged last — always win over the component's own styles. |

All native `<input>` props (`type`, `placeholder`, `value`, `onChange`, ...) are forwarded.