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

<Input placeholder="Enter your name" />

With Label

<Input label="Full Name" placeholder="John Doe" />

Required Field

<Input label="Email" type="email" required placeholder="john@example.com" />

Input Types

<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

<Input
  label="Email"
  type="email"
  value="invalid-email"
  error="Please enter a valid email address"
/>

With Helper Text

<Input
  label="Username"
  placeholder="johndoe"
  helperText="Username must be 3-20 characters"
/>

Character Count

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

Sizes

<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

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

Custom Message Format

<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:

<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

<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

<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

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

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

Validation Feedback

<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>

Overview

Components

Guides

Input

Input

Props

Input Types

Examples

Basic Input

With Label

Required Field

Input Types

With Error State

With Helper Text

Character Count

Sizes

Without Submit Button

Custom Message Format

With Form State

Custom Radius

Common Patterns

Search Input

Validation Feedback

​Input

​Props

​Input Types

​Examples

​Basic Input

​With Label

​Required Field

​Input Types

​With Error State

​With Helper Text

​Character Count

​Sizes

​Without Submit Button

​Custom Message Format

​With Form State

​Custom Radius

​Common Patterns

​Login Form

​Search Input

​Newsletter Signup

​Validation Feedback

Input

Props

Input Types

Examples

Basic Input

With Label

Required Field

Input Types

With Error State

With Helper Text

Character Count

Sizes

Without Submit Button

Custom Message Format

With Form State

Custom Radius

Common Patterns

Login Form

Search Input

Newsletter Signup

Validation Feedback