Trivela UI

Input

Displays a form input field, with variant and color token support.

Usage

input-demo.tsx
import { Input, Label } from 'trivela-ui';

export function Example() {
  return (
    <div className="space-y-2">
      <Label htmlFor="email">Email</Label>
      <Input id="email" type="email" placeholder="you@example.com" />
    </div>
  );
}

Examples

Variants

Four style variants share the same height and radius, so they stack cleanly in a form.

Colors

The color token drives the focus ring, so tab through the fields to see the difference.

With help text

Point aria-describedby at the hint so screen readers read it out along with the label.

Letters and numbers only, at least 3 characters.

With button

The input fills its container, so a flex row pairs it with a button.

Input types

The type attribute is forwarded to the native input element, so every HTML type works.

Disabled

The native disabled attribute is forwarded to the underlying input element.

API Reference

PropTypeDefaultDescription
variant'solid' | 'ghost' | 'outline' | 'subtle''solid'Style variant for the component.
color'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info' | 'neutral''primary'Color scale driving the focus ring.
size'sm' | 'md' | 'lg''md'Control height, padding and text size. Matches Button and Select.
classNamestring—Merged with the generated variant classes via cn().
...propsInputHTMLAttributes<HTMLInputElement>—All native input attributes are forwarded to the root element.