Input

A text input component with validation states and icon support.

Installation

bash

npx @smicolon/fasla-ui@latest add input

Run init once per project before adding components. See Installation.

Preview

Variants

Sizes

With Icons

Props

Prop	Type	Default	Description
`variant`	`"default" \| "error" \| "success"`	`"default"`	Visual style for validation.
`inputSize`	`"sm" \| "default" \| "lg"`	`"default"`	Field size.
`startIcon`	`ReactNode`	—	Icon at the start of the field.
`endIcon`	`ReactNode`	—	Icon at the end of the field.
`placeholder`	`string`	—	Text shown while empty.
`type`	`string`	`"text"`	Input type, such as `email`.
`disabled`	`boolean`	`false`	Disables the field and dims it.
`value`	`string`	—	Field value. Use it with `onChange`.
`onChange`	`(event) => void`	—	Called when the text changes.
`className`	`string`	—	Extra classes for the component.

Usage

tsx

import { Input } from "@/components/ui/input"

export function EmailField() {
  return (
    <div className="grid max-w-sm gap-2">
      <label htmlFor="email" className="text-sm font-medium">Email</label>
      <Input id="email" name="email" type="email" placeholder="[email protected]" />
    </div>
  )
}