Skip to main content

​
Input

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

​
Props

PropTypeDefaultDescription
namestring-Field name for form state management
labelstring-Input label
placeholderstring"Enter text..."Placeholder text
typestring"text"Input type: text, email, number, phone, password
valuestring""Initial value
requiredbooleanfalseWhether field is required
disabledbooleanfalseDisabled state
submitLabelstring"Submit"Submit button label
showSubmitbooleantrueWhether to show submit button
autoSubmitbooleantrueSubmit on enter key
messageFormatstring-Custom message format (use {value} placeholder)
errorstring-Error message to display
helperTextstring-Helper text below input
maxLengthnumber-Maximum character length
minLengthnumber-Minimum length for validation
showCountbooleanfalseShow character count
sizestring"md"Input size: sm, md, lg
radiusstring | number12Border 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

​
Login Form

<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}"
/>

​
Newsletter Signup

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