# Input

A single-line text field framed by a bordered group with room for inline icon slots.

## Installation

```tsx
import { Input, InputGroup } from "@makeplane/propel/components/input";
```
## Usage

```tsx
import { Input, InputGroup } from "@makeplane/propel/components/input";

export default function BasicDemo() {
  return (
    <InputGroup size="lg">
      <Input size="lg" aria-label="Name" placeholder="Ada Lovelace" />
    </InputGroup>
  );
}
```
## Examples

### Sizes

The `size` axis scales the control's height and text size together — md 28 / lg 32 / xl 36 / 2xl 40 px. Keep
it in sync on the `InputGroup` and its `Input`. See [Sizing](/foundations/sizing) for which
family exposes which rungs.

```tsx
import { Input, InputGroup, type InputSize } from "@makeplane/propel/components/input";

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

export default function SizesDemo() {
  return (
    <div className="flex w-72 flex-col gap-3">
      {SIZES.map((size) => (
        <InputGroup key={size} size={size}>
          {/* These inputs have no visible label, so `aria-label` is the whole accessible name —
              it has to say what the field is for, not just which rung it is on. */}
          <Input size={size} aria-label={`Email (${size})`} placeholder={size} />
        </InputGroup>
      ))}
    </div>
  );
}
```

### With icons

```tsx
import { Icon } from "@makeplane/propel/components/icon";
import { Input, InputGroup } from "@makeplane/propel/components/input";
import { MailOutline, SearchOutline } from "@makeplane/propel/icons";

export default function WithIconsDemo() {
  return (
    <InputGroup size="lg">
      <Icon icon={SearchOutline} tint="secondary" size="md" />
      <Input size="lg" aria-label="Search" placeholder="Search people" />
      <Icon icon={MailOutline} tint="secondary" size="md" />
    </InputGroup>
  );
}
```

### In a field

```tsx
import { Field, FieldError, FieldLabel } from "@makeplane/propel/components/field";
import { Input, InputGroup } from "@makeplane/propel/components/input";

export default function InAFieldDemo() {
  return (
    <Field name="email" invalid>
      <FieldLabel size="lg" inset={false}>
        Work email
      </FieldLabel>
      <InputGroup size="lg">
        <Input size="lg" defaultValue="not-an-email" />
      </InputGroup>
      <FieldError size="lg" match={true}>
        Enter a valid email address.
      </FieldError>
    </Field>
  );
}
```

### Disabled

`disabled` blocks interaction and mutes the control.

```tsx
import { Input, InputGroup } from "@makeplane/propel/components/input";

export default function DisabledDemo() {
  return (
    <InputGroup size="lg">
      <Input size="lg" aria-label="Name" placeholder="Ada Lovelace" disabled />
    </InputGroup>
  );
}
```
## API Reference

### Input

Single-line text field that automatically works inside `Field`. Base UI's `Input` control
behavior grafted onto the styled `elements` `Input` element (rule 1a) — behavior part outer,
styled part as the render target.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `size` (required) | `"md" \| "lg" \| "xl" \| "2xl"` | — |  |
| `render` | `ReactElement<unknown, string \| JSXElementConstructor<any>> \| ComponentRenderFn<HTMLProps, {}>` | — | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |

### InputGroup

The bordered group that frames the input control and its inline slots.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `size` (required) | `"md" \| "lg" \| "xl" \| "2xl"` | — |  |
| `render` | `ReactElement<unknown, string \| JSXElementConstructor<any>> \| ComponentRenderFn<HTMLProps, {}>` | — | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |