Input

Text input field with label support and validation variants.

Also known as: text field, text input, form field, text box

View in Storybook

When to use

• Single-line text entry. For multiline, use Textarea.
• For search with suggestions, use Autocomplete. For selection from options, use Select.

Import

import { Input } from '@vacano/ui'

Usage

const [value, setValue] = useState('')

<Input
  value={value}
  onChange={(e) => setValue(e.target.value)}
  placeholder="Enter text"
/>

With Label

<Input label="Email" placeholder="Enter your email" />

Variants

<Input variant="normal" label="Normal" />
<Input variant="error" label="Error" />

Sizes

<Input size="default" label="Default Size" />
<Input size="compact" label="Compact Size" />

Full Width

<Input fullWidth label="Full Width Input" />

With Message

<Input label="Email" variant="error" message="Invalid email address" />
<Input label="Username" message="Must be at least 3 characters" />

With Prefix

<Input label="Website" prefix="https://" placeholder="example.com" />
<Input label="Price" prefix="$" placeholder="0.00" />

Disabled

<Input disabled label="Disabled" value="Cannot edit" />

Props

Prop	Type	Default	Description
label	string	-	Label text above input
variant	'normal' | 'error'	'normal'	Visual variant
size	'compact' | 'default'	'default'	Input size
fullWidth	boolean	false	Full width input
message	string	-	Message text below input (error, hint)
prefix	ReactNode	-	Prefix content inside input (text, icon)
className	string	-	CSS class name for the root element
classnames	InputClassNames	-	Custom class names for inner elements
ref	Ref<HTMLInputElement>	-	Ref to the underlying input element
data-test-id	string	-	Test identifier attribute

All standard HTML input attributes are also supported (e.g. value, onChange, placeholder, disabled, type, name, autoFocus, etc.).

ClassNames

Key	Description
input	Input element
label	Label element

Related

• FieldLabel - Standalone form label
• FieldMessage - Validation and helper messages
• Textarea - Multiline text input
• Autocomplete - Search input with suggestions