logoNamu Design

⌘ K
  • Design
  • Development
  • Components
  • Blog
  • Resources
1.0.0
  • Components Overview
  • General
    • Button
    • FloatButtonNew
    • Icon
    • Typography
  • Layout
    • Divider
    • Grid
    • Layout
    • Space
  • Navigation
    • Anchor
    • Breadcrumb
    • Dropdown
    • Menu
    • Pagination
    • Steps
  • Data Entry
    • AutoComplete
    • Cascader
    • Checkbox
    • ColorPickerNew
    • DatePicker
    • Form
    • Input
    • InputNumber
    • Mentions
    • Radio
    • Rate
    • Select
    • Slider
    • Switch
    • TimePicker
    • Transfer
    • TreeSelect
    • Upload
  • Data Display
    • Avatar
    • Badge
    • Calendar
    • Card
    • Carousel
    • Collapse
    • Descriptions
    • Empty
    • Image
    • List
    • Popover
    • QRCodeNew
    • Segmented
    • Statistic
    • Table
    • Tabs
    • Tag
    • Timeline
    • Tooltip
    • TourNew
    • Tree
  • Feedback
    • Alert
    • Drawer
    • Message
    • Modal
    • Notification
    • Popconfirm
    • Progress
    • Result
    • Skeleton
    • Spin
    • Watermark
  • Other
    • Affix
    • AppNew
    • ConfigProvider
When To Use
Examples
Basic usage
Three sizes of Input
Pre / Post tab
Compact Style
Search box
Search box with loading
TextArea
Autosizing the height to fit the content
Format Tooltip Input
prefix and suffix
Password box
With clear icon
With character counting
Textarea with character counting
Status
Borderless
Focus
API
Input
Input.TextArea
Semantic DOM
Design Token
FAQ
Why Input lose focus when change prefix/suffix/showCount
Why TextArea in control can make value exceed maxLength?

Input

    • FormInputNumber

    Resources

    Namu Design Charts
    Namu Design Pro
    Namu Design Pro Components
    Namu Design Mobile
    Namu Design Mini
    Namu Design Landing-Landing Templates
    Scaffolds-Scaffold Market
    Umi-React Application Framework
    dumi-Component doc generator
    qiankun-Micro-Frontends Framework
    ahooks-React Hooks Library
    Ant Motion-Motion Solution
    China Mirror 🇨🇳

    Community

    Awesome Namu Design
    Medium
    Twitter
    yuqueNamu Design in YuQue
    Namu Design in Zhihu
    Experience Cloud Blog
    seeconfSEE Conf-Experience Tech Conference

    Help

    GitHub
    Change Log
    FAQ
    Bug Report
    Issues
    Discussions
    StackOverflow
    SegmentFault

    Ant XTechMore Products

    yuqueYuQue-Document Collaboration Platform
    AntVAntV-Data Visualization
    EggEgg-Enterprise Node.js Framework
    kitchenKitchen-Sketch Toolkit
    xtechAnt Financial Experience Tech
    Theme Editor
    Made with ❤ by
    Ant Group and Namu Design Community

    A basic widget for getting the user input is a text field. Keyboard and mouse can be used for providing or changing data.

    When To Use

    • A user input in a form field is needed.
    • A search input is required.

    Examples

    Basic usage

    Basic usage example.

    expand codeexpand code
    Pre / Post tab

    Using pre & post tabs example.

    expand codeexpand code
    Search box

    Example of creating a search box by grouping a standard input with a search button.

    expand codeexpand code
    TextArea

    For multi-line input.

    expand codeexpand code
    Format Tooltip Input

    You can use the Input in conjunction with Tooltip component to create a Numeric Input, which can provide a good experience for extra-long content display.

    expand codeexpand code
    Password box

    Input type of password.

    expand codeexpand code
    With character counting

    Show character counting.

    expand codeexpand code
    Status

    Add status to Input with status, which could be error or warning.

    expand codeexpand code
    Focus

    Focus with additional option.

    expand codeexpand code
    Three sizes of Input

    There are three sizes of an Input box: large (40px), default (32px) and small (24px).

    expand codeexpand code
    Compact Style

    Use Space.Compact create compact style, See the Space.Compact documentation for more.

    expand codeexpand code
    Search box with loading

    Search loading when onSearch.

    expand codeexpand code
    Autosizing the height to fit the content

    autoSize prop for a textarea type of Input makes the height to automatically adjust based on the content. An option object can be provided to autoSize to specify the minimum and maximum number of lines the textarea will automatically adjust.

    expand codeexpand code
    prefix and suffix

    Add a prefix or suffix icons inside input.

    expand codeexpand code
    With clear icon

    Input box with the remove icon, click the icon to delete everything.

    expand codeexpand code
    Textarea with character counting

    Show character counting.

    expand codeexpand code
    Borderless

    No border.

    expand codeexpand code

    API

    Common props ref：Common props

    Input

    PropertyDescriptionTypeDefaultVersion
    addonAfterThe label text displayed after (on the right side of) the input fieldReactNode-
    addonBeforeThe label text displayed before (on the left side of) the input fieldReactNode-
    allowClearIf allow to remove input content with clear iconboolean | { clearIcon: ReactNode }false
    borderedWhether has border stylebooleantrue4.5.0
    classNamesSemantic DOM classRecord<SemanticDOM, string>-5.4.0
    defaultValueThe initial input contentstring-
    disabledWhether the input is disabledbooleanfalse
    idThe ID for inputstring-
    maxLengthThe maximum number of characters in Inputnumber-
    showCountWhether to show character countboolean | { formatter: (info: { value: string, count: number, maxLength?: number }) => ReactNode }false4.18.0 info.value: 4.23.0
    statusSet validation status'error' | 'warning'-4.19.0
    stylesSemantic DOM styleRecord<SemanticDOM, CSSProperties>-5.4.0
    prefixThe prefix icon for the InputReactNode-
    sizeThe size of the input box. Note: in the context of a form, the middle size is usedlarge | middle | small-
    suffixThe suffix icon for the InputReactNode-
    typeThe type of input, see: MDN( use Input.TextArea instead of type="textarea")stringtext
    valueThe input content valuestring-
    onChangeCallback when user inputfunction(e)-
    onPressEnterThe callback function that is triggered when Enter key is pressedfunction(e)-

    When Input is used in a Form.Item context, if the Form.Item has the id props defined then value, defaultValue, and id props of Input are automatically set.

    The rest of the props of Input are exactly the same as the original input.

    Input.TextArea

    PropertyDescriptionTypeDefaultVersion
    allowClearCustomize clear iconboolean | { clearIcon?: ReactNode }false5.8.0: Support object type
    autoSizeHeight autosize feature, can be set to true | false or an object { minRows: 2, maxRows: 6 }boolean | objectfalse
    borderedWhether has border stylebooleantrue4.5.0
    classNamesSemantic DOM classRecord<SemanticDOM, string>-5.4.0
    defaultValueThe initial input contentstring-
    maxLengthThe maximum number of characters in TextAreanumber-4.7.0
    showCountWhether to show character countboolean | { formatter: (info: { value: string, count: number, maxLength?: number }) => string }false4.7.0 formatter: 4.10.0 info.value: 4.23.0
    stylesSemantic DOM styleRecord<SemanticDOM, CSSProperties>-5.4.0
    valueThe input content valuestring-
    onPressEnterThe callback function that is triggered when Enter key is pressedfunction(e)-
    onResizeThe callback function that is triggered when resizefunction({ width, height })-

    The rest of the props of Input.TextArea are the same as the original textarea.

    Input.Search

    PropertyDescriptionTypeDefault
    enterButtonWhether to show an enter button after input. This property conflicts with the addonAfter propertyboolean | ReactNodefalse
    loadingSearch box with loadingbooleanfalse
    onSearchThe callback function triggered when you click on the search-icon, the clear-icon or press the Enter keyfunction(value, event)-

    Supports all props of Input.

    Input.Password

    PropertyDescriptionTypeDefaultVersion
    iconRenderCustom toggle button(visible) => ReactNode(visible) => (visible ? <EyeOutlined /> : <EyeInvisibleOutlined />)4.3.0
    visibilityToggleWhether show toggle button or control password visibleboolean | VisibilityToggletrue

    VisibilityToggle

    PropertyDescriptionTypeDefaultVersion
    visibleWhether the password is show or hidebooleanfalse4.24.0
    onVisibleChangeCallback executed when visibility of the password is changedboolean-4.24.0

    Input Methods

    NameDescriptionParametersVersion
    blurRemove focus-
    focusGet focus(option?: { preventScroll?: boolean, cursor?: 'start' | 'end' | 'all' })option - 4.10.0

    Semantic DOM

    Input

    PropertyDescriptionVersion
    inputinput element5.4.0
    prefixWrapper of prefix5.4.0
    suffixWrapper of suffix5.4.0
    countText count element5.4.0

    Input.TextArea

    PropertyDescriptionVersion
    textareatextarea element5.4.0
    countText count element5.4.0

    Design Token

    Global Token

    FAQ

    Why Input lose focus when change prefix/suffix/showCount

    When Input dynamic add or remove prefix/suffix/showCount will make React recreate the dom structure and new input will be not focused. You can set an empty <span /> element to keep the dom structure:

    const suffix = condition ? <Icon type="smile" /> : <span />;
    

    <Input suffix={suffix} />;

    Why TextArea in control can make value exceed maxLength?

    When in control, component should show as what it set to avoid submit value not align with store value in Form.

    http://.com
    http://
    .com
    http://.com
    cascader
    https://


    0 / 20

    0 / 100





    https://
    Zhejiang






    ￥RMB

    ￥RMB


    0 / 1000 / 100