Input

This documentation covers input-related components showcased in InputPage: Input, Textarea, InputWithIcon, FloatingLabelInput, and InputGroup.

Overview

• Types: text, email, password, number, search, url, tel, date, time, color, range, file
• Sizes: sm, default, lg
• Border styles: default, dashed, dotted
• Shapes: default, rounded, rounded-full
• States: normal, disabled, readonly, validation states with messages
• Icons: left/right icons using InputWithIcon
• Floating labels: FloatingLabelInput
• Grouped inputs: InputGroup with addons/buttons
• Masking (Cleave.js): phone, numeric, and custom patterns

Input

Props

Prop	Type	Default	Description
type	string	'text'	HTML input type (text, email, password, number, etc.)
className	string	''	Additional classes (e.g., input-success)
size	'sm' | 'lg'	-	Adjust input paddings and font size
borderStyle	'dashed' | 'dotted'	-	Border style variants
shape	'rounded' | 'rounded-full'	-	Corner radius variants
disabled	boolean	false	Disable input
placeholder	string	-	Placeholder text
value	string	-	Controlled value
onChange	(e) => void	-	Change handler
onFocus	(e) => void	-	Focus handler
onBlur	(e) => void	-	Blur handler
isMask	boolean	false	Use Cleave.js masked input
options	object	-	Cleave.js options when isMask is true
...props	any	-	Spread to underlying <input> or <Cleave>

Basic Usage

<Input type='text' placeholder='e.g. John Doe' className='w-full' />
<Input type='email' placeholder='e.g. john@email.com' className='w-full' />
<Input type='password' placeholder='e.g. mySecret123' className='w-full' />
<Input type='number' placeholder='e.g. 25' className='w-full' />

Other Types

<Input type='url' placeholder='https://example.com' className='w-full' />
<Input type='tel' placeholder='08123456789' className='w-full' />
<Input type='date' className='w-full' />
<Input type='time' className='w-full' />
<Input type='color' className='w-full h-10' />
<Input type='range' min='0' max='100' defaultValue='50' className='w-full' />
<Input type='file' className='w-full' />

Sizes

<Input placeholder='Default size' />
<Input size='sm' placeholder='Small size' />
<Input size='lg' placeholder='Large size' />

Border Styles

<Input placeholder='Default border' />
<Input borderStyle='dashed' placeholder='Dashed border' />
<Input borderStyle='dotted' placeholder='Dotted border' />

Shapes

<Input placeholder='Default shape' />
<Input shape='rounded' placeholder='Rounded corners' />
<Input shape='rounded-full' placeholder='Pill shape' />

States

<Input placeholder='Normal' />
<Input disabled placeholder='Disabled input' />
<Input readOnly value='Readonly value' placeholder='Readonly' />

Validation States & Messages

Use utility classes on input and an adjacent message element:

<Input className='input-success' placeholder='Valid input' />
<div className='input-message input-message-success'>This input is valid!</div>

<Input className='input-error' placeholder='Invalid input' />
<div className='input-message input-message-error'>This field is required!</div>

<Input className='input-warning' placeholder='Warning' />
<div className='input-message input-message-warning'>Please check your input!</div>

<Input className='input-info' placeholder='Info' />
<div className='input-message input-message-info'>This is an informational message!</div>

Textarea

Textarea supports the same sizing, borderStyle, shape, and disabled props, plus rows.

<Textarea className='w-full resize-none' rows={3} placeholder='Textarea' />
<Textarea size='sm' placeholder='Small textarea' />
<Textarea borderStyle='dashed' placeholder='Dashed' />
<Textarea shape='rounded' placeholder='Rounded' />

InputWithIcon

Attach an icon to the left (default) or right side of the input.

Props

Prop	Type	Default	Description
icon	string | ReactNode	-	Iconify name or custom node
iconPosition	'left' | 'right'	'left'	Icon position
className	string	''	Wrapper extra classes
inputProps	object	{}	Props forwarded to inner Input

Usage

<InputWithIcon icon='lucide:search' inputProps={{ type: 'search', placeholder: 'Search...' }} />
<InputWithIcon
  icon={<svg className='w-5 h-5' /* ... */ />}
  iconPosition='right'
  inputProps={{ type: 'password', placeholder: 'Password with right icon...' }}
/>

FloatingLabelInput

Floating label that sits within the input until focused/filled.

Props

Prop	Type	Default	Description
label	string	-	Floating label text
className	string	''	Wrapper extra classes
inputProps	object	{}	Props forwarded to inner Input

Usage

<FloatingLabelInput label='Email Address' inputProps={{ type: 'email', placeholder: ' ' }} />
<FloatingLabelInput label='Full Name' inputProps={{ type: 'text', placeholder: ' ' }} />

InputGroup

Group inputs with addons or buttons.

<InputGroup>
  <span className='input-group-text'>@</span>
  <Input placeholder='e.g. johndoe' />
</InputGroup>

<InputGroup>
  <Input placeholder='e.g. 100' />
  <button className='btn btn-primary rounded-r-md rounded-l-none'>Submit</button>
</InputGroup>

<InputGroup>
  <Input placeholder='e.g. John' />
  <Input placeholder='e.g. Doe' />
</InputGroup>

Masked Input (Cleave.js)

Enable masking with isMask and provide options.

// Phone (Indonesia)
<Input isMask options={{ phone: true, phoneRegionCode: 'ID' }} placeholder='08xx-xxxx-xxxx' />

// Numeric with thousand separators
<Input isMask options={{ numeral: true, numeralThousandsGroupStyle: 'thousand' }} placeholder='1,234,567' />

// Custom blocks
<Input isMask options={{ blocks: [4, 4, 4, 4], delimiter: '-' }} placeholder='XXXX-XXXX-XXXX-XXXX' />

Examples (from InputPage)

• Full grid of input types
• Sizing options (sm, default, lg)
• Border styles (default, dashed, dotted)
• Shapes (default, rounded, rounded-full)
• Input states and validation messages
• With icons (left/right)
• Floating labels
• Input groups (addon, button, multiple)
• Disabled/readonly inputs

Styling Reference

• Base class: .form-input
• Sizes: .form-sm, .form-lg
• Border styles: .input-dashed, .input-dotted
• Shapes: .rounded, .rounded-full
• Disabled: .disabled
• Validation: .input-success | .input-error | .input-warning | .input-info
• Messages: .input-message, plus .input-message-success | -error | -warning | -info
• InputWithIcon wrapper: .input-with-icon, icon: .input-icon, right: .input-icon-right
• Floating label wrapper: .input-floating, label: .floating-label
• Group: .input-group, addon: .input-group-text

Accessibility

• Use <label> elements tied to inputs where appropriate
• Provide descriptive placeholders/labels
• Ensure focus states are clearly visible
• Use aria-invalid with error states when needed

Best Practices

1. Use appropriate type for better mobile keyboards and validation
2. Prefer controlled inputs for consistency in forms
3. Show validation messages close to the input
4. Use sm/lg sizes to match density of surrounding UI
5. Keep icon buttons focusable and accessible when used inside groups

Related Components

• Select, Checkbox, Radio, Switch – other form controls
• FileInput – specialized file uploader (alternative to type='file')
• Button – for actions within InputGroup