> ## Documentation Index
> Fetch the complete documentation index at: https://docs.lyzn.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Input

> Text input field with validation, error handling, and character counting

# Input

The Input component provides a text input field with support for various input types, validation feedback, error states, and character counting.

## Props

| Prop            | Type               | Default           | Description                                                |
| --------------- | ------------------ | ----------------- | ---------------------------------------------------------- |
| `name`          | `string`           | -                 | Field name for form state management                       |
| `label`         | `string`           | -                 | Input label                                                |
| `placeholder`   | `string`           | `"Enter text..."` | Placeholder text                                           |
| `type`          | `string`           | `"text"`          | Input type: `text`, `email`, `number`, `phone`, `password` |
| `value`         | `string`           | `""`              | Initial value                                              |
| `required`      | `boolean`          | `false`           | Whether field is required                                  |
| `disabled`      | `boolean`          | `false`           | Disabled state                                             |
| `submitLabel`   | `string`           | `"Submit"`        | Submit button label                                        |
| `showSubmit`    | `boolean`          | `true`            | Whether to show submit button                              |
| `autoSubmit`    | `boolean`          | `true`            | Submit on enter key                                        |
| `messageFormat` | `string`           | -                 | Custom message format (use `{value}` placeholder)          |
| `error`         | `string`           | -                 | Error message to display                                   |
| `helperText`    | `string`           | -                 | Helper text below input                                    |
| `maxLength`     | `number`           | -                 | Maximum character length                                   |
| `minLength`     | `number`           | -                 | Minimum length for validation                              |
| `showCount`     | `boolean`          | `false`           | Show character count                                       |
| `size`          | `string`           | `"md"`            | Input size: `sm`, `md`, `lg`                               |
| `radius`        | `string \| number` | `12`              | Border radius: `sm`, `md`, `lg`, `xl`, or number           |

## Input Types

* `"text"` - Standard text input (default)
* `"email"` - Email input with email keyboard on mobile
* `"number"` - Numeric input with number keyboard
* `"phone"` - Phone number input with phone keyboard
* `"password"` - Password input with hidden characters

## Examples

### Basic Input

```jsx theme={null}
<Input placeholder="Enter your name" />
```

### With Label

```jsx theme={null}
<Input label="Full Name" placeholder="John Doe" />
```

### Required Field

```jsx theme={null}
<Input label="Email" type="email" required placeholder="john@example.com" />
```

### Input Types

```jsx theme={null}
<Col gap="md">
  <Input label="Email" type="email" placeholder="user@example.com" />
  <Input label="Password" type="password" placeholder="••••••••" />
  <Input label="Age" type="number" placeholder="25" />
  <Input label="Phone" type="phone" placeholder="+1 (555) 123-4567" />
</Col>
```

### With Error State

```jsx theme={null}
<Input
  label="Email"
  type="email"
  value="invalid-email"
  error="Please enter a valid email address"
/>
```

### With Helper Text

```jsx theme={null}
<Input
  label="Username"
  placeholder="johndoe"
  helperText="Username must be 3-20 characters"
/>
```

### Character Count

```jsx theme={null}
<Input
  label="Bio"
  placeholder="Short bio..."
  maxLength={100}
  showCount
/>
```

### Sizes

```jsx theme={null}
<Col gap="md">
  <Input label="Small" size="sm" placeholder="Small input" />
  <Input label="Medium" size="md" placeholder="Medium input" />
  <Input label="Large" size="lg" placeholder="Large input" />
</Col>
```

### Without Submit Button

```jsx theme={null}
<Input
  name="firstName"
  label="First Name"
  showSubmit={false}
  placeholder="Enter first name"
/>
```

### Custom Message Format

```jsx theme={null}
<Input
  label="Search"
  placeholder="Search..."
  messageFormat="Searching for: {value}"
/>
```

### With Form State

When used with `name` prop, input updates form state instead of sending messages immediately:

```jsx theme={null}
<Card>
  <Col gap="md">
    <Input name="firstName" label="First Name" showSubmit={false} />
    <Input name="lastName" label="Last Name" showSubmit={false} />
    <Input name="email" label="Email" type="email" showSubmit={false} />
    <Button
      label="Submit"
      action={{ type: "lyzn.sendMessage" }}
    />
  </Col>
</Card>
```

### Custom Radius

```jsx theme={null}
<Col gap="md">
  <Input label="Sharp" radius="sm" placeholder="Sharp corners" />
  <Input label="Rounded" radius="lg" placeholder="Rounded corners" />
  <Input label="Pill" radius={9999} placeholder="Pill shape" />
</Col>
```

## Common Patterns

### Login Form

```jsx theme={null}
<Card>
  <Col gap="md">
    <Title value="Sign In" />
    <Input
      name="email"
      label="Email"
      type="email"
      placeholder="you@example.com"
      showSubmit={false}
    />
    <Input
      name="password"
      label="Password"
      type="password"
      placeholder="••••••••"
      showSubmit={false}
    />
    <Button
      label="Sign In"
      fullWidth
      action={{ type: "lyzn.sendMessage" }}
    />
  </Col>
</Card>
```

### Search Input

```jsx theme={null}
<Input
  placeholder="Search products..."
  submitLabel="Search"
  messageFormat="Search: {value}"
/>
```

### Newsletter Signup

```jsx theme={null}
<Row gap="sm">
  <Input
    type="email"
    placeholder="Enter your email"
    showSubmit={false}
    name="email"
  />
  <Button
    label="Subscribe"
    action={{ type: "lyzn.sendMessage" }}
  />
</Row>
```

### Validation Feedback

```jsx theme={null}
<Col gap="md">
  <Input
    label="Email"
    type="email"
    value="user@example.com"
    helperText="We'll never share your email"
  />
  <Input
    label="Email"
    type="email"
    value="invalid"
    error="Please enter a valid email address"
  />
</Col>
```