Input

Displays a form input field.

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

npx shadcn@latest add @madeui/input

Usage

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

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

With label

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

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.

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.

Picture

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.

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,
  },
});

Built on Base UI 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 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.