Input

Setup

import { Input } from '@fragments-sdk/ui';

Examples

Loading preview...

Props

Prop	Type	Default	Description
`value`	`string`	Not set	Current input value (controlled)
`defaultValue`	`string`	Not set	Default value for uncontrolled usage
`placeholder`	`string`	Not set	Placeholder text shown when empty
`type`	`enumnumbertextemailpasswordtelurl`	`text`	HTML input type for validation and keyboard
`size`	`enumsmmdlg`	`md`	Size variant
`disabled`	`boolean`	`false`	Whether the input is interactive
`error`	`boolean`	`false`	Whether to show error styling
`success`	`boolean`	`false`	Whether to show success/validated styling
`label`	`string`	Not set	Label text displayed above input
`required`	`boolean`	`false`	Whether the field is required (shows asterisk)
`helperText`	`string`	Not set	Helper or error message below input
`startAdornment`	`node`	Not set	Content rendered before the input (icon or prefix text)
`endAdornment`	`node`	Not set	Content rendered after the input (icon or suffix text)
`shortcut`	`string`	Not set	Keyboard shortcut hint displayed inside the input
`shortcutBehavior`	`enumdisplay-onlyfocus-input`	`display-only`	Whether shortcut hint is visual only or also registers a global focus hotkey
`onChange`	`function`	Not set	Called with new value on change
`onValueChange`	`function`	Not set	Value-first change callback alias: (value: string) => void
`onBlur`	`function`	Not set	—
`onFocus`	`function`	Not set	—
`onKeyDown`	`function`	Not set	—
`rootProps`	`object`	Not set	HTML attributes applied to the wrapper element
`inputStyle`	`object`	Not set	Inline styles applied directly to the input element
`inputClassName`	`string`	Not set	Class name applied directly to the input element
`withFieldWrapper`	`boolean`	`true`	Render built-in label/helper wrapper (set false for Field composition or bare input rendering)
`className`	`string`	Not set	Wrapper class name
`style`	`object`	Not set	Wrapper styles

Usage Guidelines

When to use

Collecting single-line text data from users
Email, password, phone number, or URL input
Search fields
Short form fields (name, title, etc.)

When not to use

Multi-line text (use Textarea)
Selecting from predefined options (use Select)
Boolean input (use Checkbox or Switch)
Date/time input (use DatePicker)

Best practices

Always provide a label for accessibility
Use appropriate input type for data validation
Show validation errors with error prop and helperText
Use placeholder for format hints, not labels
Shortcut hints are display-only by default; set shortcutBehavior="focus-input" to opt into global hotkey focusing

Accessibility

Labels must be associated with inputs
Error messages should be announced to screen readers
Required fields should be indicated

Textareaalternative

Use Textarea for multi-line text input

Selectalternative

Use Select when choosing from predefined options

Fieldparent

Use Field for advanced form composition and custom controls

Setup

Examples

Default

With Value

With Helper

Error State

Disabled

Required

Sizes

Bare Input (Field Composition)

Shortcut Focus Hotkey

Success State

With Start Adornment

With End Adornment

Props

Usage Guidelines

When to use

When not to use

Best practices

Setup

Examples

Default

With Value

With Helper

Error State

Disabled

Required

Sizes

Bare Input (Field Composition)

Shortcut Focus Hotkey

Success State

With Start Adornment

With End Adornment

Props

Usage Guidelines

When to use

When not to use

Best practices

Related Components