GitHub

Input

A single-line text field.

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

export function Basic() {
  return <Input aria-label="Name" placeholder="Jane Doe…" className="w-64" />;
}

Sizes

Three sizes to fit different layouts.

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

const sizes = ["sm", "md", "lg"] as const;

export function Sizes() {
  return (
    <div className="flex w-64 flex-col gap-3">
      {sizes.map((size) => (
        <Input key={size} aria-label={`Size ${size}`} size={size} placeholder={`Size ${size}`} />
      ))}
    </div>
  );
}

Disabled

Prevent interaction with the field.

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

export function Disabled() {
  return <Input aria-label="Name" disabled defaultValue="Can’t edit this" className="w-64" />;
}

Invalid

Shows an error state when the value is invalid.

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

export function Invalid() {
  return <Input aria-label="Email" data-invalid defaultValue="not-an-email" className="w-64" />;
}

API

PropTypeDefault
size"sm" | "md" | "lg""md"

Plus everything from Base UI Input, including value, defaultValue, onValueChange, and the native input attributes.