Input | Fragments

Preview

<Input label="Name" placeholder="Enter your name" />

Installation

npx @usefragments/cli add input

Writes src/fragments/ui/components/Input plus what it imports, the globals stylesheet, and .fragments/registry-lock.json, then prints the packages to add. No account, no key.

Your own registry: publish from Fragments Cloud and add --registry org/name. Connect a workspace.

Examples

With Value

Starts with a value already in the field.

<Input label="Email" type="email" value="user@example.com" />

With Helper

Supporting text sits under the field.

<Input
  label="Password"
  type="password"
  placeholder="Create a password"
  helperText="Must be at least 8 characters"
/>

Error State

Red border, and helperText becomes the reason.

<Input
  label="Email"
  type="email"
  value="invalid-email"
  error
  helperText="Please enter a valid email address"

Disabled

Dimmed, unfocusable, still shows its value.

<Input label="Username" value="ada.lovelace" disabled />

Required

Asterisk marks the field as mandatory.

<Input
  label="Email"
  type="email"
  placeholder="user@example.com"
  required
/>

Sizes

Three heights: sm, md, lg.

<div style={{ display: 'flex', flexDirection: 'column', gap: '12px', maxWidth: '300px' }}>
  <Input label="Small" size="sm" placeholder="Small input" />
  <Input label="Medium" size="md" placeholder="Medium input" />
  <Input label="Large" size="lg" placeholder="Large input" />
</div>

Bare Input (Field Composition)

Drops the built-in label wrapper so Field owns the layout.

<Input
  withFieldWrapper={false}
  aria-label="Search"
  placeholder="Search..."
  rootProps={{ 'data-demo': 'bare-input-wrapper' }}
/>

Search With Shortcut

Leading icon and a ⌘K hint that focuses the field.

<Input
  aria-label="Search findings"
  placeholder="Search findings..."
  shortcut="⌘K"
  shortcutBehavior="focus-input"
  startAdornment={<MagnifyingGlass aria-hidden="true" />}

With Start Adornment

Prefix sits inside the field, before the text.

<Input
  label="Price"
  placeholder="0.00"
  startAdornment={<span>$</span>}
/>

With End Adornment

Suffix sits inside the field, after the text.

<Input
  label="Weight"
  placeholder="0"
  endAdornment={<span>kg</span>}
/>

API

Component 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
`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 as a visual kbd token 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

Accessibility

Label is programmatically tied to the input
Error text is announced to screen readers
Required fields are marked

Guidance

Use when

Single-line answers: name, email, password, phone, URL
Search fields
Short free-form values a list cannot cover

Avoid when

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

TextareaalternativeUse Textarea for multi-line text input
SelectalternativeUse Select when choosing from predefined options
FieldparentUse Field for advanced form composition and custom controls

Next steps

Accessibility contractThe keyboard, focus and naming rules every component carries.
Every componentThe catalog, grouped by what each component does.