ComponentsFormInput

Input

Text input field with support for labels, helper text, error states, clearable, password toggle, prefix and suffix.

3 variants3 sizesClearablePassword toggleTextareaError state

Variants

Live preview

outlined (default), filled with tonal background, floating with animated label

Outlined

Filled

Floating

App.tsx

tsx

1import { Input } from 'omverse-ui'
2 
3<Input variant="outlined" label="Outlined" placeholder="Type something..." />
4<Input variant="filled" label="Filled" placeholder="Type something..." />
5<Input variant="floating" label="Floating" placeholder="Type something..." />

Sizes

Live preview

sm (36px), md (44px, default), lg (52px)

App.tsx

tsx

1<Input size="sm" placeholder="Small" />
2<Input size="md" placeholder="Medium" />
3<Input size="lg" placeholder="Large" />

All states

Live preview

Default, disabled, error, success and helper text states

Required field

Helper text here

App.tsx

tsx

1<Input placeholder="Default" />
2<Input placeholder="Disabled" disabled />
3<Input placeholder="Error" error errorText="Required field" />
4<Input placeholder="Success" success />
5<Input placeholder="With helper" helperText="Helper text here" />

Prefix and suffix

Live preview

Accepts a string or any ReactNode in the prefix and suffix slots

.com

App.tsx

tsx

1import { Input } from 'omverse-ui'
2 
3<Input prefix="$" placeholder="Amount" />
4<Input suffix=".com" placeholder="domain" />
5<Input prefix={<i className="ti ti-search" style={{ fontSize: 16 }} aria-hidden="true" />} placeholder="Search..." />

Password toggle

Live preview

Adds a show/hide button to reveal the password — use with type=password

Password

App.tsx

tsx

1<Input
2  type="password"
3  label="Password"
4  placeholder="Enter password..."
5  passwordToggle
6/>

Max length counter

Live preview

Shows a character counter below the input — requires maxLength

Bio

0 / 100

App.tsx

tsx

1<Input
2  label="Bio"
3  placeholder="Write something..."
4  maxLength={100}
5  showCount
6/>

Copyable

Live preview

Copy button in the trailing slot — best combined with readOnly

API Key

App.tsx

tsx

1<Input
2  label="API Key"
3  value="sk-1234567890abcdef"
4  copyable
5  readOnly
6/>

Textarea

Live preview

Renders a resizable multiline textarea with the same styling API

Message

App.tsx

tsx

1<Input textarea rows={3} label="Message" placeholder="Write your message..." />

Props

PropTypeDefaultDescription

variant'outlined' | 'filled' | 'floating''outlined'Visual style

size'sm' | 'md' | 'lg''md'Input size

labelstringundefinedLabel shown above input

placeholderstringundefinedPlaceholder text

errorbooleanfalseError state — red border and error icon

errorTextstringundefinedError message shown below

successbooleanfalseSuccess state — green border and success icon

helperTextstringundefinedHelper text shown below

disabledbooleanfalseDisables the input

clearablebooleanfalseShows clear button when value exists

passwordTogglebooleanfalseAdds password visibility toggle — use with type="password"

maxLengthnumberundefinedMaximum character count

showCountbooleanfalseShows character counter — requires maxLength

copyablebooleanfalseShows a copy button in the trailing slot

textareabooleanfalseRenders as textarea

rowsnumber3Number of visible rows for textarea

prefixReactNodeundefinedContent shown before the input

suffixReactNodeundefinedContent shown after the input