Documentation
Webframe UI
Inputs
Input

Input

A Universal Input component that handles user inputs of all types, including using your own custom UI. This component is a thin wrapper that delegates rendering to other input controls.

It supports Universal Input API and adds extra elements, like help info, error messages and tooltip popup, for a consistent UX (user experience).

Props

PropTypeDefaultDescription
type
String
'text'

Native input type attribute, also a key identifier for delegated input controls. See input type examples.

id
String

Unique input identifier, default is string created from React.useId()

info
String
|
Number
|
Boolean
|
Function

Help information to show after the Input

error
String
|
Number
|
Boolean
|
Function

Error message to show after the Input (ex. on validation fail)

helpTransition
Boolean
|
Object
true

Whether to enable input info/error animation transition (or expandCollapse transition options)

compact
Boolean

Whether to make input take only the minimum content width necessary

controlProps
Object

Props to pass to Input Control component

tooltip
String
|
Number
|
Boolean
|
Function
|
Object

Tooltip props (or content) to display as popup on interaction with this component

Examples

Basic Usage

Example
Input Label & Placeholder
Required Input
Help Info
Error Message
Tooltip Popup

Input Types

Text Input
Text Area
Password
Number Input
Date Input
Date & Time
Phone Number
Select Dropdown
File Uploads Dropzone
Multiple Files Uploader
Range Slider
Switch Input
Checkbox

Input Sizes

Example
Compact Input

Input States

Disabled
Read only
Loading

Input Values

Default Value
Controlled State
Sync Value with Uncontrolled State

Custom Input Type

Webframe universal Input supports rendering with any custom input control. Add as many controls as you like without worrying about the bundle size because Webframe uses automatic code splitting that lazy loads components on the client side.

Setup

import { dynamicImport } from '@webframer/js'
import { Input } from '@webframer/ui'
 
// Define all custom Input controls in the project for lazy loading
Input.defaultProps.controls = dynamicImport({
  'MyCustomInput': () => import (`./MyCustomInput.jsx`),
})

Usage

import { Input } from '@webframer/ui'
 
function Form () {
  // Input `type` is case-sensitive, it is recommended
  // to use CapCase naming convention for custom controls
  return <Input type='MyCustomInput' />
}

Built-in Types

In addition to native browser input types (opens in a new tab) (ie. text, number, email, etc.), these are Webframe built-in types with their corresponding components:

  • checkbox →
  • file →
  • select →
  • switch →
  • textarea →
  • upload →
InputsCheckbox