Components

Input

Styled text input field with error message support

Overview

Input is a styled text input field. It supports error message display, full width mode, and disabled state.

Variant — Three styles: default, error, success
Error Message — Displays error text below the input field via the errorMessage prop
Full Width — Takes up the full width of the parent container with isFullWidth

Variants

This field is required

Full Width

Props

Prop	Type	Default	Description
`variant`	`'default' \| 'error' \| 'success'`	`'default'`	Input field style
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Input field size
`isFullWidth`	`boolean`	—	Full width mode
`isDisabled`	`boolean`	—	Disabled state
`errorMessage`	`string`	—	Error message displayed below the input
`onChange`	`(e: ChangeEvent) => void`	—	Value change handler
`ref`	`Ref<HTMLInputElement>`	—	Input element ref
`...rest`	`InputHTMLAttributes`	—	Native input attributes (`placeholder`, `type`, `name`, etc.)

Guidelines

When in error state, use variant="error" together with errorMessage
Use isFullWidth in forms to maintain a consistent layout