Input

Usage

Import and use the Input component in your application.

import { Input } from "@ninna-ui/forms";

export default function Example() {
  return (
    <Input placeholder="Enter your name" />
  );
}

Basic

Basic input with placeholder.

Variants

Input supports outline, filled, flushed, and unstyled variants.

Sizes

Input comes in 5 sizes: xs, sm, md, lg, and xl.

Colors

Input supports multiple color themes for focus states.

With Icons

Input with left and right icons.

Clearable

Input with a clear button that appears when there's a value.

Character Counter

Input with character count display when maxLength is set.

Floating Label

Input with a floating label that animates on focus.

Read Only

Input in read-only mode.

Full Width

Control whether input takes full container width.

States

Input in different states: normal, disabled, read-only, and invalid.

React Hook Form

Input works seamlessly with React Hook Form using the register() pattern. Wrap with Field for labels and error messages.

API Reference

Complete list of props for the Input component.

Accessibility