Input

Displays a single-line text field with optional leading icon and clear action.

Installation

bun add elia

@import "tailwindcss";
@import "@aile.sh/elia/styles/elia.css";
@source "../node_modules/@aile.sh/elia";

Usage

import { useState } from "react";
import { Input } from "@aile.sh/elia";

export function Example() {
  const [query, setQuery] = useState("claude-sonnet-4");

  return (
    <div className="flex flex-wrap items-center gap-2">
      <Input placeholder="Model name" aria-label="Model name" className="w-44" />
      <Input
        icon={
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
            <circle cx="11" cy="11" r="7" />
            <path d="M21 21l-4.3-4.3" />
          </svg>
        }
        placeholder="Search models"
        aria-label="Search models"
        className="w-44"
      />
      <Input
        clearable
        value={query}
        onChange={(event) => setQuery(event.target.value)}
        aria-label="Clearable"
        className="w-44"
      />
      <Input size="sm" placeholder="Small" aria-label="Small" className="w-40" />
      <Input disabled placeholder="Disabled" aria-label="Disabled" className="w-44" />
    </div>
  );
}

— elia design system · MIT · base · https://github.com/aile-sh/elia