Input

A versatile input component that supports various states, validations, and icon placements. Use it to collect user input with appropriate visual feedback and enhanced usability through icons.

Default

The default input style with neutral colors. Can include optional icons for better visual context.

1

<Input placeholder="All we have to decide is what to do with the time that is given us" />

States

Input components can reflect different states through visual styling:

Success State

Use the success state to indicate valid input or successful validation. The checkmark icon provides immediate visual feedback.

1
2
3
4

<Input
  placeholder="Not all those who wander are lost"
  variant="success"
/>

Warning State

The warning state can be used to show potential issues that don't prevent form submission. The alert icon draws attention to the warning state.

1
2
3
4

<Input
  placeholder="It's a dangerous business, going out your door"
  variant="warning"
/>

Error State

Use the error state to indicate invalid input that needs correction. The alert icon emphasizes the error state.

1
2
3
4

<Input
  placeholder="One Ring to rule them all, One Ring to find them"
  variant="error"
/>

Disabled State

Use the disabled state when user interaction should be prevented, such as during form submission or when the input depends on other conditions.

1
2
3
4

<Input
  disabled
  placeholder="Even the smallest person can change the course of the future"
/>

With Default Value State

Input pre-populated with an initial value that users can modify or build upon.

1
2
3
4

<Input
  defaultValue="Speak friend and enter"
  placeholder="The password is mellon"
/>

Interactive Elements

Password Toggle

Example of an input with a clickable icon to toggle password visibility.

1
2
3
4
5

<Input
  placeholder="Speak friend and enter"
  rightIcon={<button className="focus:outline-none" onClick={onClick} type="button"><EyeOff className="h-4 w-4" /></button>}
  type="password"
/>

Search with Icons

Example of an input with both leading and trailing icons for enhanced functionality.

1
2
3
4
5

<Input
  leftIcon={<l className="h-4 w-4" />}
  placeholder="Search in emails"
  rightIcon={<l className="h-4 w-4" />}
/>

Props

The Input component accepts all standard HTML input attributes plus the following:

Icon Guidelines

When using icons with the Input component:

• Icons should be sized appropriately (recommended: 16x16px using h-4 w-4 classes)
• Icons inherit colors based on the input's variant state
• Interactive icons (like password toggle) should be wrapped in buttons
• Avoid using too many icons which might clutter the interface
• Left icons are typically used for input type indication (search, email, etc.)
• Right icons are commonly used for interactive elements (password toggle, clear button, etc.)