# Input Field

A labeled single-line text field with optional hint and error messaging.

## Installation

```tsx
import { InputField } from "@makeplane/propel/components/input-field";
```
## Usage

```tsx
import { InputField } from "@makeplane/propel/components/input-field";

export default function BasicDemo() {
  return (
    <InputField
      size="lg"
      orientation="vertical"
      label="Email"
      placeholder="you@example.com"
      description="We'll use this to send you receipts."
      hint="We'll never share your email."
    />
  );
}
```
## Examples

### Sizes

`size` sets the frame height, the value's text size, and any inline glyph together —
md 28 / lg 32 / xl 36 / 2xl 40 px. The label steps with it (`body-xs` through `lg`, `body-sm` above), and the
description and hint sit one tier below the label (`body-2xs`, then `body-xs`). The text `Input`
family starts at `md` (28px); there is no 20 or 24px `Input` frame.
[NumberField](/components/number-field) goes down to `sm`. See [Sizing](/foundations/sizing) for
which family exposes which rungs.

```tsx
import { InputField, type InputSize } from "@makeplane/propel/components/input-field";

const SIZES: InputSize[] = ["lg", "xl", "2xl"];

export default function SizesDemo() {
  return (
    <div className="flex flex-col gap-4">
      {SIZES.map((size) => (
        <InputField
          key={size}
          size={size}
          orientation="vertical"
          label={size}
          placeholder="you@example.com"
        />
      ))}
    </div>
  );
}
```

### Horizontal

The `horizontal` orientation places the label beside the control instead of above it.

```tsx
import { InputField } from "@makeplane/propel/components/input-field";

export default function HorizontalDemo() {
  return (
    <InputField
      size="lg"
      orientation="horizontal"
      label="Workspace name"
      placeholder="Acme Inc."
      hint="Shown across your projects."
    />
  );
}
```

### With icons

```tsx
import { Icon } from "@makeplane/propel/components/icon";
import { InputField } from "@makeplane/propel/components/input-field";
import { AtOutline, SearchOutline } from "@makeplane/propel/icons";

export default function WithIconsDemo() {
  return (
    <InputField
      size="lg"
      orientation="vertical"
      label="Search members"
      placeholder="Search…"
      startIcon={<Icon icon={SearchOutline} tint="placeholder" />}
      endIcon={<Icon icon={AtOutline} tint="placeholder" />}
    />
  );
}
```

### Invalid

```tsx
import { InputField } from "@makeplane/propel/components/input-field";

export default function InvalidDemo() {
  return (
    <InputField
      size="lg"
      orientation="vertical"
      label="Email"
      required
      defaultValue="not-an-email"
      error="Enter a valid email address."
    />
  );
}
```

### Disabled

`disabled` mutes the whole field — label, control, and hint — and blocks input.

```tsx
import { InputField } from "@makeplane/propel/components/input-field";

export default function DisabledDemo() {
  return (
    <InputField
      size="lg"
      orientation="vertical"
      label="Email"
      placeholder="you@example.com"
      disabled
    />
  );
}
```
## API Reference

### InputField

Single-line text field built on Base UI `Field`. Supports inline start/end slots and a
`horizontal` orientation where the label sits beside the control.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `size` (required) | `"md" \| "lg" \| "xl" \| "2xl"` | — | Size scale. `lg` \| `xl` \| `2xl`. |
| `orientation` (required) | `"horizontal" \| "vertical"` | — | Label placement: `vertical` (label above) \| `horizontal` (label beside). |
| `required` | `boolean` | — | Marks the field required: adds a `*` asterisk and sets `aria-required`. The native `required` attribute is deliberately not rendered, so browser constraint validation never intercepts form submits ahead of the app's own validation. |
| `label` | `string` | — | Label text shown above (or beside) the control. |
| `description` | `ReactNode` | — | Supporting text shown directly below the label. |
| `hint` | `ReactNode` | — | Helper text shown below the control. Replaced by `error` when an error is set. |
| `error` | `ReactNode` | — | Error text shown below the control. Overrides `hint` and marks the field invalid (danger border). |
| `startIcon` | `ReactNode` | — | Element rendered at the inline start of the control, e.g. `<Icon icon={Search} />`. |
| `endIcon` | `ReactNode` | — | Element rendered at the inline end of the control, e.g. `<Icon icon={Mail} />`. |