Input · Input
Input
Input is a basic component for users to enter and edit text.

Demos

How to import

Basic Usage

Size

Support three sizes: large, default, and small.

Disabled

Prefix/Suffix

When the content of prefix and suffix is text or Semi Icon, the left and right margin will be automatically added. If it is a custom ReactNode, the left and right margin will be 0

Addon

When the content of addonBefore and addonAfter is text or Semi Icon, the left and right margin will be automatically added. If it is a custom ReactNode, the left and right margin will be 0.

Clear Icon

Use showClear to allow clear current value when clicking on clear icon.

Password Mode

Hide the content of input

Validation

You can set different validateStatus to provide style feedback to the user.

Controlled Component

You can use value along with onChange property if you want to use Input as a controlled component.

InputGroup

You could put multiple text field input into <InputGroup> and set size, disabled to the entire group. Supported fields include: InputInputNumberSelectAutoCompleteTreeSelectCascaderDatePicker
Notice
InputGroup does not recommend inserting non-supported elements. Form.InputGroup will perform error aggregation on supported elements without customizing the elements for processing.

TextArea

Used for multi-line text. You can set maxCount to restrict text entering and display text count. Since 1.30.0, showClear is supported.

Autosize TextArea

You can set autosize to allow TextArea resizing height with content.

Custom calculated character string length

By setting the getValueLength property, you can customize the length of the character string. With maxLength and minLength, you can support emoji length to calculate according to the visible length.
What is done inside Semi when getValueLength is passed in:
  • maxLength: maxLength is not passed directly to the native input. If the input length exceeds the maximum limit, the legal length character entered last time is used.
  • minLength: dynamically switch the length of minLength, emoji is calculated according to a length.
  • maxCount: compare the values obtained using getValueLength with maxCount
Answers to some questions:
Why not just import the grapheme-splitter package? The uncompressed size of this package is 200+ kB, which is a bit too large for users who do not need to calculate emoji according to the visible length. Therefore, Semi chose to use the length calculation function as an argument for users to pass in
Why not modify maxLength dynamically? Modify maxLength dynamically after the input operation is completed, calculate the remaining character length that can be entered. If the maxLength is set to 1, you want to enter a '💖' with a length of 2, but due to the limitation of input maxLength, you can't enter it at all here, and you can't update maxLength.

API Reference

Input

Other attributes are same with html <input>
PropertyInstructionstypeDefault
aria-describedbySet the aria-describedby propertystring-
aria-errormessageSet the aria-errormessage propertystring-
aria-invalidSet aria-invalid propertystring-
aria-labelSet aria-label propertiesstring-
aria-labelledbySet aria-labelledby propertiesstring-
aria-requiredSet aria-required propertiesstring-
addonAfterAddon after input boxReactNode
addonBeforeAddon before input boxReactNode
classNameClass namestring
defaultValueDefault valueReactText
disabledToggle whether to disable inputbooleanfalse
getValueLengthCustom calculated character string length(value: string) => number
hideSuffixToggle whether to hide suffix if clear icon is shown,by default the two icon are side by sidebooleanfalse
modeThe mode of the input box. The optional value is passwordstring
modemode of input,optional: password >= v1.3.0string
prefixPrefixReactNode
preventScrollIndicates whether the browser should scroll the document to display the newly focused element, acting on the focus method inside the component, excluding the component passed in by the userboolean
showClearShow clear button >=1.0.0booleanfalse
sizeSize, one of large, default, smallstringdefault
styleInline styleCSSProperties
suffixSuffixReactNode
typeInput type attribute, same with html <input>stringtext
validateStatusValidate status for styling only, one of default, error, warningstringdefault
valueCurrent value of input boxReactText
onBlurCallback invoked when input loses focusfunction(e:event)
onChangeCallback invoked when input value changesfunction(value:string, e:event)
onClearCallback invoked when clicking clear iconfunction(e:event)
onEnterPressCallback invoked when pressing enter(keypress)function(e:event)
onFocusCallback invoked when input gets focusfunction(e:event)
onKeyDownCallback invoked when keydownfunction(e:event)
onKeyPressCallback invoked when keypressfunction(e:event)
onKeyUpCallback invoked when keyupfunction(e:event)

TextArea

Other attributes are same with html <textarea>
PropertyInstructionsTypeDefault
aria-describedbySet the aria-describedby propertystring-
aria-errormessageSet the aria-errormessage propertystring-
aria-invalidSet aria-invalid propertystring-
aria-labelSet aria-label propertiesstring-
aria-labelledbySet aria-labelledby propertiesstring-
aria-requiredSet aria-required propertiesstring-
autosizeToggle whether to allow autosize when content height changesbooleanfalse
classNameClass namestring-
colsThe visible width of the text control, in average character widths. If it is specified, it must be a positive integer.number-
disabledDisabledbooleanfalse
getValueLengthCustom calculated character string length(value: string) => number
maxCountThe maximum number of characters and display countnumber-
placeholderContent to be appear by defaultstring-
preventScrollIndicates whether the browser should scroll the document to display the newly focused element, acting on the focus method inside the component, excluding the component passed in by the userboolean
readonlyRead-only, not editablebooleanfalse
rowsThe number of visible text lines for the control.number4
showClearDisplay the clear button when the input box has content and hover or focus >=1.30.0booleanfalse
styleInline styleCSSProperties-
onBlurCallback invoked when input loses focus(e:event) => void-
onChangeCallback invoked when input value changes(value:string, e:event) => void
onClearCallback invoked when clicking clear icon >=1.30.0(e:event) => void
onEnterPressCallback invoked when pressing enter(e:event) => void-
onFocusCallback invoked when input gets focus(e:event) => void-
onKeyDownCallback invoked when keydown, html event(e:event) => void-
onKeyPressCallback invoked when keypress, html event(e:event) => void-
onKeyUpCallback invoked when keyup, html event(e:event) => void-
onResizeCallback invoked when height changes in autosize mode v>=0.37.0({ height:number }) => void-

InputGroup

Common attributes will be set to the child elements of InputGroup, such as disabled, onFocus, etc. If you set onFocus, onBlur or disabled on the child, it will override the corresponding property value of InputGroup.
PropertyInstructionsTypeDefault
classNameclass name of the groupstring-
disableddisabledboolean-
labelLabel property of InputGroupLabelProps-
labelPositionlabel position, optional top or leftstring-
sizeinput box size, large, default, smallstring'default'
stylestyles for the groupCSSProperties-
onBlurCallback when input box loses focus(e:event) => void-
onFocusThe callback when the input box is focused(e:event) => void-

Methods

NameDescription
blur()Remove focus
focus()Get focus

Accessibility

ARIA

  • When validateStatus is error, the aria-invalid of the input box is true
  • When used in Form, field label is Input's aria-label

Keyboard and focus

  • Input can be focused, keyboard users can use Tab and Shift + Tab to switch focus
  • The password button can be focused and activated with Enter or Space key after focusing

Design Tokens

© 2021 - 2022 Semi Design. All rights reserved.

京ICP备19058139号-13浙公网安备 33011002016131号

Designed & Developed with love by Douyin FE & MED