Input

Text input field for capturing user data.

import { Input } from "ui-lab-components";
 
export function Example() {
  return <Input placeholder="Enter your name..." />;
}

Basic Input

A simple text input field with default styling. Use this as the standard input element for collecting user text input.

import React from 'react';
import { Input } from 'ui-lab-components';
 
export default function Example() {
  return <Input placeholder="Enter text..." />;
}

Validation States

Input fields with error and success validation states, including helper text for user feedback.

Please enter a valid email address

Email address is available

We'll never share your email with anyone else.

import React from 'react';
import { Input, Label } from 'ui-lab-components';
import { FaCircleExclamation, FaCircleCheck } from 'react-icons/fa6';
 
export default function Example() {
  return (
    <div className="flex flex-col gap-6 w-full max-w-sm">
      {/* Error State */}
      <div className="flex flex-col gap-1.5">
        <Label error helperText="Please enter a valid email address" helperTextError>
          Email
        </Label>
        <Input
          type="email"
          placeholder="Enter your email"
          error
          defaultValue="invalid-email"
          icon={{ suffix: <FaCircleExclamation className="text-danger-600" size={14} /> }}
        />
      </div>
 
      {/* Success State */}
      <div className="flex flex-col gap-1.5">
        <Label helperText="Email address is available">
          Email
        </Label>
        <Input
          type="email"
          placeholder="Enter your email"
          defaultValue="user@example.com"
          icon={{ suffix: <FaCircleCheck className="text-success-600" size={14} /> }}
          className="border-success-600 focus:border-success-600"
        />
      </div>
 
      {/* Default State with Helper Text */}
      <div className="flex flex-col gap-1.5">
        <Label required helperText="We'll never share your email with anyone else.">
          Email
        </Label>
        <Input
          type="email"
          placeholder="Enter your email"
        />
      </div>
    </div>
  );
}
UI Lab