A basic widget for getting the user input is a text field. Keyboard and mouse can be used for providing or changing data.
A basic widget for getting the user input is a text field. Keyboard and mouse can be used for providing or changing data.
import { Input } from '@lobehub/ui';The rest of the props of Input are exactly the same as the original input.
| Name | Description | Type | Default |
|---|---|---|---|
| type | Type of the input | "ghost"|"block"|"pure" | "ghost" |
| rootClassName | -- | string | -- |
| size | -- | "small"|"middle"|"large" | -- |
| disabled | -- | boolean | -- |
| status | -- | ""|"error"|"warning" | -- |
| bordered | -- | boolean | -- |
| variant | -- | "outlined"|"filled"|"borderless" | "outlined" |
| style | -- | {} | -- |
| className | -- | string | -- |
| children | -- | ReactNode | -- |
| dangerouslySetInnerHTML | -- | {__html:string|TrustedHTML} | -- |
| onCopy | -- | (event:E)=>void | -- |
| onCopyCapture | -- | (event:E)=>void | -- |
| onCut | -- | (event:E)=>void | -- |
| onCutCapture | -- | (event:E)=>void | -- |
| onPaste | -- | (event:E)=>void | -- |
| onPasteCapture | -- | (event:E)=>void | -- |
| onCompositionEnd | -- | (event:E)=>void | -- |
| onCompositionEndCapture | -- | (event:E)=>void | -- |
| onCompositionStart | -- | (event:E)=>void | -- |
| onCompositionStartCapture | -- | (event:E)=>void | -- |
| onCompositionUpdate | -- | (event:E)=>void | -- |
| onCompositionUpdateCapture | -- | (event:E)=>void | -- |
| onFocus | -- | (event:E)=>void | -- |
| onFocusCapture | -- | (event:E)=>void | -- |
| onBlur | -- | (event:E)=>void | -- |
| onBlurCapture | -- | (event:E)=>void | -- |
| onChange | -- | (event:E)=>void | -- |
| onChangeCapture | -- | (event:E)=>void | -- |
| onBeforeInput | -- | (event:E)=>void | -- |
| onBeforeInputCapture | -- | (event:E)=>void | -- |
| onInput | -- | (event:E)=>void | -- |
| onInputCapture | -- | (event:E)=>void | -- |
| onReset | -- | (event:E)=>void | -- |
| onResetCapture | -- | (event:E)=>void | -- |
| onSubmit | -- | (event:E)=>void | -- |
| onSubmitCapture | -- | (event:E)=>void | -- |
| onInvalid | -- | (event:E)=>void | -- |
| onInvalidCapture | -- | (event:E)=>void | -- |
| onLoad | -- | (event:E)=>void | -- |
| onLoadCapture | -- | (event:E)=>void | -- |
| onError | -- | (event:E)=>void | -- |
| onErrorCapture | -- | (event:E)=>void | -- |
| onKeyDown | -- | (event:E)=>void | -- |
| onKeyDownCapture | -- | (event:E)=>void | -- |
| onKeyPress | -- | (event:E)=>void | -- |
| onKeyPressCapture | -- | (event:E)=>void | -- |
| onKeyUp | -- | (event:E)=>void | -- |
| onKeyUpCapture | -- | (event:E)=>void | -- |
| onAbort | -- | (event:E)=>void | -- |
| onAbortCapture | -- | (event:E)=>void | -- |
| onCanPlay | -- | (event:E)=>void | -- |
| onCanPlayCapture | -- | (event:E)=>void | -- |
| onCanPlayThrough | -- | (event:E)=>void | -- |
| onCanPlayThroughCapture | -- | (event:E)=>void | -- |
| onDurationChange | -- | (event:E)=>void | -- |
| onDurationChangeCapture | -- | (event:E)=>void | -- |
| onEmptied | -- | (event:E)=>void | -- |
| onEmptiedCapture | -- | (event:E)=>void | -- |
| onEncrypted | -- | (event:E)=>void | -- |
| onEncryptedCapture | -- | (event:E)=>void | -- |
| onEnded | -- | (event:E)=>void | -- |
| onEndedCapture | -- | (event:E)=>void | -- |
| onLoadedData | -- | (event:E)=>void | -- |
| onLoadedDataCapture | -- | (event:E)=>void | -- |
| onLoadedMetadata | -- | (event:E)=>void | -- |
| onLoadedMetadataCapture | -- | (event:E)=>void | -- |
| onLoadStart | -- | (event:E)=>void | -- |
| onLoadStartCapture | -- | (event:E)=>void | -- |
| onPause | -- | (event:E)=>void | -- |
| onPauseCapture | -- | (event:E)=>void | -- |
| onPlay | -- | (event:E)=>void | -- |
| onPlayCapture | -- | (event:E)=>void | -- |
| onPlaying | -- | (event:E)=>void | -- |
| onPlayingCapture | -- | (event:E)=>void | -- |
| onProgress | -- | (event:E)=>void | -- |
| onProgressCapture | -- | (event:E)=>void | -- |
| onRateChange | -- | (event:E)=>void | -- |
| onRateChangeCapture | -- | (event:E)=>void | -- |
| onResize | -- | (event:E)=>void | -- |
| onResizeCapture | -- | (event:E)=>void | -- |
| onSeeked | -- | (event:E)=>void | -- |
| onSeekedCapture | -- | (event:E)=>void | -- |
| onSeeking | -- | (event:E)=>void | -- |
| onSeekingCapture | -- | (event:E)=>void | -- |
| onStalled | -- | (event:E)=>void | -- |
| onStalledCapture | -- | (event:E)=>void | -- |
| onSuspend | -- | (event:E)=>void | -- |
| onSuspendCapture | -- | (event:E)=>void | -- |
| onTimeUpdate | -- | (event:E)=>void | -- |
| onTimeUpdateCapture | -- | (event:E)=>void | -- |
| onVolumeChange | -- | (event:E)=>void | -- |
| onVolumeChangeCapture | -- | (event:E)=>void | -- |
| onWaiting | -- | (event:E)=>void | -- |
| onWaitingCapture | -- | (event:E)=>void | -- |
| onAuxClick | -- | (event:E)=>void | -- |
| onAuxClickCapture | -- | (event:E)=>void | -- |
| onClick | -- | (event:E)=>void | -- |
| onClickCapture | -- | (event:E)=>void | -- |
| onContextMenu | -- | (event:E)=>void | -- |
| onContextMenuCapture | -- | (event:E)=>void | -- |
| onDoubleClick | -- | (event:E)=>void | -- |
| onDoubleClickCapture | -- | (event:E)=>void | -- |
| onDrag | -- | (event:E)=>void | -- |
| onDragCapture | -- | (event:E)=>void | -- |
| onDragEnd | -- | (event:E)=>void | -- |
| onDragEndCapture | -- | (event:E)=>void | -- |
| onDragEnter | -- | (event:E)=>void | -- |
| onDragEnterCapture | -- | (event:E)=>void | -- |
| onDragExit | -- | (event:E)=>void | -- |
| onDragExitCapture | -- | (event:E)=>void | -- |
| onDragLeave | -- | (event:E)=>void | -- |
| onDragLeaveCapture | -- | (event:E)=>void | -- |
| onDragOver | -- | (event:E)=>void | -- |
| onDragOverCapture | -- | (event:E)=>void | -- |
| onDragStart | -- | (event:E)=>void | -- |
| onDragStartCapture | -- | (event:E)=>void | -- |
| onDrop | -- | (event:E)=>void | -- |
| onDropCapture | -- | (event:E)=>void | -- |
| onMouseDown | -- | (event:E)=>void | -- |
| onMouseDownCapture | -- | (event:E)=>void | -- |
| onMouseEnter | -- | (event:E)=>void | -- |
| onMouseLeave | -- | (event:E)=>void | -- |
| onMouseMove | -- | (event:E)=>void | -- |
| onMouseMoveCapture | -- | (event:E)=>void | -- |
| onMouseOut | -- | (event:E)=>void | -- |
| onMouseOutCapture | -- | (event:E)=>void | -- |
| onMouseOver | -- | (event:E)=>void | -- |
| onMouseOverCapture | -- | (event:E)=>void | -- |
| onMouseUp | -- | (event:E)=>void | -- |
| onMouseUpCapture | -- | (event:E)=>void | -- |
| onSelect | -- | (event:E)=>void | -- |
| onSelectCapture | -- | (event:E)=>void | -- |
| onTouchCancel | -- | (event:E)=>void | -- |
| onTouchCancelCapture | -- | (event:E)=>void | -- |
| onTouchEnd | -- | (event:E)=>void | -- |
| onTouchEndCapture | -- | (event:E)=>void | -- |
| onTouchMove | -- | (event:E)=>void | -- |
| onTouchMoveCapture | -- | (event:E)=>void | -- |
| onTouchStart | -- | (event:E)=>void | -- |
| onTouchStartCapture | -- | (event:E)=>void | -- |
| onPointerDown | -- | (event:E)=>void | -- |
| onPointerDownCapture | -- | (event:E)=>void | -- |
| onPointerMove | -- | (event:E)=>void | -- |
| onPointerMoveCapture | -- | (event:E)=>void | -- |
| onPointerUp | -- | (event:E)=>void | -- |
| onPointerUpCapture | -- | (event:E)=>void | -- |
| onPointerCancel | -- | (event:E)=>void | -- |
| onPointerCancelCapture | -- | (event:E)=>void | -- |
| onPointerEnter | -- | (event:E)=>void | -- |
| onPointerLeave | -- | (event:E)=>void | -- |
| onPointerOver | -- | (event:E)=>void | -- |
| onPointerOverCapture | -- | (event:E)=>void | -- |
| onPointerOut | -- | (event:E)=>void | -- |
| onPointerOutCapture | -- | (event:E)=>void | -- |
| onGotPointerCapture | -- | (event:E)=>void | -- |
| onGotPointerCaptureCapture | -- | (event:E)=>void | -- |
| onLostPointerCapture | -- | (event:E)=>void | -- |
| onLostPointerCaptureCapture | -- | (event:E)=>void | -- |
| onScroll | -- | (event:E)=>void | -- |
| onScrollCapture | -- | (event:E)=>void | -- |
| onWheel | -- | (event:E)=>void | -- |
| onWheelCapture | -- | (event:E)=>void | -- |
| onAnimationStart | -- | (event:E)=>void | -- |
| onAnimationStartCapture | -- | (event:E)=>void | -- |
| onAnimationEnd | -- | (event:E)=>void | -- |
| onAnimationEndCapture | -- | (event:E)=>void | -- |
| onAnimationIteration | -- | (event:E)=>void | -- |
| onAnimationIterationCapture | -- | (event:E)=>void | -- |
| onToggle | -- | (event:E)=>void | -- |
| onBeforeToggle | -- | (event:E)=>void | -- |
| onTransitionCancel | -- | (event:E)=>void | -- |
| onTransitionCancelCapture | -- | (event:E)=>void | -- |
| onTransitionEnd | -- | (event:E)=>void | -- |
| onTransitionEndCapture | -- | (event:E)=>void | -- |
| onTransitionRun | -- | (event:E)=>void | -- |
| onTransitionRunCapture | -- | (event:E)=>void | -- |
| onTransitionStart | -- | (event:E)=>void | -- |
| onTransitionStartCapture | -- | (event:E)=>void | -- |
| defaultChecked | -- | boolean | -- |
| defaultValue | -- | string|number|ReadonlyArray | -- |
| suppressContentEditableWarning | -- | boolean | -- |
| suppressHydrationWarning | -- | boolean | -- |
| accessKey | -- | string | -- |
| autoCapitalize | -- | off|none|on|sentences|words|characters|string | -- |
| autoFocus | -- | boolean | -- |
| contentEditable | -- | Booleanish|inherit|plaintext-only | -- |
| contextMenu | -- | string | -- |
| dir | -- | string | -- |
| draggable | -- | true|false|boolean | -- |
| enterKeyHint | -- | "enter"|"done"|"go"|"next"|"previous"|"search"|"send" | -- |
| hidden | -- | boolean | -- |
| id | -- | string | -- |
| lang | -- | string | -- |
| nonce | -- | string | -- |
| slot | -- | string | -- |
| spellCheck | -- | true|false|boolean | -- |
| tabIndex | -- | number | -- |
| title | -- | string | -- |
| translate | -- | "yes"|"no" | -- |
| radioGroup | -- | string | -- |
| role | -- | term|none|string|search|alert|alertdialog|application|article|banner|button|cell|checkbox|columnheader|combobox|complementary|contentinfo|definition|dialog|directory|document|feed|figure|form|grid|gridcell|group|heading|img|link|list|listbox|listitem|log|main|marquee|math|menu|menubar|menuitem|menuitemcheckbox|menuitemradio|navigation|note|option|presentation|progressbar|radio|radiogroup|region|row|rowgroup|rowheader|scrollbar|searchbox|separator|slider|spinbutton|status|switch|tab|table|tablist|tabpanel|textbox|timer|toolbar|tooltip|tree|treegrid|treeitem | -- |
| about | -- | string | -- |
| content | -- | string | -- |
| datatype | -- | string | -- |
| inlist | -- | any | -- |
| prefix | -- | ReactNode | -- |
| property | -- | string | -- |
| rel | -- | string | -- |
| resource | -- | string | -- |
| rev | -- | string | -- |
| typeof | -- | string | -- |
| vocab | -- | string | -- |
| autoCorrect | -- | string | -- |
| autoSave | -- | string | -- |
| color | -- | string | -- |
| itemProp | -- | string | -- |
| itemScope | -- | boolean | -- |
| itemType | -- | string | -- |
| itemID | -- | string | -- |
| itemRef | -- | string | -- |
| results | -- | number | -- |
| security | -- | string | -- |
| unselectable | -- | "off"|"on" | -- |
| popover | -- | ""|"auto"|"manual" | -- |
| popoverTargetAction | -- | "toggle"|"show"|"hide" | -- |
| popoverTarget | -- | string | -- |
| inert | -- | boolean | -- |
| inputMode | Hints at the type of data that might be entered by the user while editing the element or its contents | "text"|"url"|"none"|"search"|"tel"|"email"|"numeric"|"decimal" | -- |
| is | Specify that a standard HTML element should behave like a defined custom built-in element | string | -- |
| width | -- | number|string | -- |
| height | -- | number|string | -- |
| prefixCls | -- | string | -- |
| classNames | -- | {affixWrapper?:string;prefix?:string;suffix?:string;groupWrapper?:string;wrapper?:string;variant?:string;input?:string;count?:string} | -- |
| form | -- | string | -- |
| list | -- | string | -- |
| formAction | -- | string|(formData:FormData)=>void|Promise|unknown | -- |
| formEncType | -- | string | -- |
| formMethod | -- | string | -- |
| formNoValidate | -- | boolean | -- |
| formTarget | -- | string | -- |
| name | -- | string | -- |
| value | -- | string|number|unknown|ReadonlyArray | -- |
| styles | -- | {affixWrapper?:object;prefix?:object;suffix?:object;input?:object;count?:object} | -- |
| step | -- | number|string | -- |
| pattern | -- | string | -- |
| placeholder | -- | string | -- |
| onPressEnter | -- | (event:E)=>void | -- |
| max | -- | number|string | -- |
| min | -- | number|string | -- |
| src | -- | string | -- |
| alt | -- | string | -- |
| multiple | -- | boolean | -- |
| maxLength | -- | number | -- |
| minLength | -- | number | -- |
| readOnly | -- | boolean | -- |
| required | -- | boolean | -- |
| autoComplete | -- | string | -- |
| accept | -- | string | -- |
| capture | -- | boolean|user|environment | -- |
| checked | -- | boolean | -- |
| showCount | It's better to use `count.show` instead | boolean|{formatter:(args:{ value: string; count: number; maxLength?: number | undefined; })=>ReactNode} | -- |
| htmlSize | -- | number | -- |
| count | -- | {max?:number;strategy?:(value:string)=>number;show?:boolean|ShowCountFormatter;exceedFormatter?:(value:string,config:{ max: number; })=>string} | -- |
| onClear | -- | ()=>void | -- |
| suffix | -- | ReactNode | -- |
| addonBefore | -- | ReactNode | -- |
| addonAfter | -- | ReactNode | -- |
| allowClear | -- | boolean|{clearIcon?:ReactNode} | -- |
| ref | Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). | |bivarianceHack|RefObject | -- |
| key | -- | Key| | -- |