Input

A one-line text field, with an optional label, helper text and icons. It shows when a value passes or fails validation, in four sizes and two corner shapes.

Installation

bash
npx @smicolon/fasla-ui@latest add input

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

Preview

As it appears on your ID.

Variants

Coupon applied to your order.

Enter an email address, like name@example.com.

Contact support to change it.

Sizes

Labels and icons

Optional

As it appears on your ID.

12/40

At least 8 characters.

Props

PropTypeDefaultDescription
size"xs" | "sm" | "md" | "lg""md"Field height: 28, 32, 36 or 40px.
radius"standard" | "rounded""standard"Corner shape: 8px corners, or fully rounded ends.
status"default" | "success""default"Set to success to mark a value that passed validation.
invalidbooleanfalseMarks the field invalid. aria-invalid does the same.
disabledbooleanfalseDisables the field and dims the whole group.
labelReactNode—The field's label, linked to the input for you.
labelEndReactNode—A short note at the end of the label row, such as Optional.
descriptionReactNode—Helper text under the field. A screen reader reads it with the field.
descriptionEndReactNode—A note at the end of the helper row, such as a character count.
errorReactNode—The message shown in place of description while the field is invalid.
startIconReactNode—An icon at the start of the field.
endIconReactNode—An icon or a small button at the end of the field.
placeholderstring—Text shown while the field is empty.
typestring"text"Input type, such as email.
valuestring—Field value. Use it with onChange.
onChange(event) => void—Called when the text changes.
classNamestring—Extra CSS classes for the field group.

Usage

tsx
import { Mail } from "lucide-react"
import { Input } from "@/components/ui/input"

export function EmailField() {
  return (
    <Input
      name="email"
      type="email"
      label="Email"
      description="We send the receipt here."
      startIcon={<Mail />}
    />
  )
}