Input

A flexible text input component that supports multiple HTML input types, three size variants, a multiline mode (rendered as a <textarea>), and inline error message display. Built with class-variance-authority for consistent styling.

Import

import { Input } from '@wavebooking/aqua-fusion';

Preview

Live PreviewOpen in Storybook

Loading preview...

Usage

<Input placeholder="Enter your name" />

<Input type="email" inputSize="lg" placeholder="Email address" />

<Input
  type="password"
  error="Password must be at least 8 characters"
/>

<Input multiline placeholder="Write a message..." />

Props

Prop	Type	Default	Description
`type`	'text' \| 'number' \| 'email' \| 'password' \| 'date' \| 'time' \| 'file' \| 'tel' \| 'datetime-local'	`'text'`	HTML input type. Ignored when multiline is enabled.
`inputSize`	'default' \| 'sm' \| 'lg'	`'default'`	Size variant controlling the height of the input.
`multiline`	boolean \| 'sm' \| 'lg'	`false`	Renders a textarea instead of an input. Pass a string size to control the minimum height.
`error`	boolean \| string	`false`	Error state. When a string is provided, it is displayed as an inline error message.
`onChange`	(e: ChangeEvent) => void	-	Change event handler for the input or textarea.
`placeholder`	string	-	Placeholder text shown when the input is empty.
`disabled`	boolean	`false`	Whether the input is disabled.
`id`	string	-	HTML id attribute. Used to associate the error message via aria-describedby.
`className`	string	-	Additional CSS classes to apply.

The component also accepts all standard HTML <input> and <textarea> attributes (except size, which is replaced by inputSize).