Retrieve text input from a user.
Basic input field.
Inputs of different sizes.
Specify width or other styles.
Disable interactive inputs.
Show a short label in the line.
Labels for custom styles.
Differentiate states by color.
Specify an icon component.
Add a clear button in the input box.
Capture changes in input.
useInput
Use hooks
to capture changes.
Update component in an uncontrolled way.
Input.Props
Attribute | Description | Type | Accepted values | Default |
---|---|---|---|---|
value | input value | string | - | - |
initialValue | initial value | string | - | - |
placeholder | placeholder | string | - | - |
size | input size | NormalSizes | InputSizes | medium |
status | current status | NormalTypes | InputStatus | default |
readOnly | native attr | boolean | - | false |
disabled | disable input | boolean | - | false |
clearable | show clear icon | boolean | - | false |
label | text label for input | string | - | - |
labelRight | text label at right for input | string | - | - |
icon | icon for input | React.ReactNode | - | - |
iconRight | icon at right for input | React.ReactNode | - | - |
iconClickable | icons are clickable | boolean | - | false |
onIconClick | click icon event | (e: React.ChangeEvent) => void | - | - |
onChange | change event | (e: React.ChangeEvent) => void | - | - |
onClearClick | clear icon event | (e: React.MouseEvent) => void | - | - |
ref | forwardRef | Ref<HTMLInputElement | null> | - | - |
... | native props | InputHTMLAttributes | 'alt', 'type', 'className', ... | - |
Input.Password.Props
Attribute | Description | Type | Accepted values | Default |
---|---|---|---|---|
hideToggle | hide toggle icon | boolean | - | false |
... | input props | Input.Props | Input.Props | - |
InputSizes
type InputSizes = 'mini' | 'small' | 'medium' | 'large'
InputStatus
type InputStatus = 'default' | 'secondary' | 'success' | 'warning' | 'error'
useInput
type useInput = (
initialValue: string,
) => {
state: string
setState: Dispatch<SetStateAction<string>>
currentRef: MutableRefObject<string>
reset: () => void
bindings: {
value: string
onChange: (event: React.ChangeEvent<HTMLInputElement>) => void
}
}