{"id":134479,"date":"2021-03-09T08:38:21","date_gmt":"2021-03-09T08:38:21","guid":{"rendered":"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/components\/input-control\/"},"modified":"2026-09-04T14:34:24","modified_gmt":"2026-09-04T14:34:24","slug":"input-control","status":"publish","type":"blocks-handbook","link":"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/components\/input-control\/","title":{"rendered":"InputControl"},"content":{"rendered":"

This feature is still experimental. \u201cExperimental\u201d means this is an early implementation subject to drastic and breaking changes.<\/p>\n

InputControl components let users enter and edit text. This is an experimental component intended to (in time) merge with or replace TextControl<\/a>.<\/p>\n

Usage<\/h2>\n
import { __experimentalInputControl as InputControl } from '@wordpress\/components';\nimport { useState } from 'react';\n\nconst Example = () => {\n    const [ value, setValue ] = useState( '' );\n\n    return (\n        <InputControl\n            value={ value }\n            onChange={ ( nextValue ) => setValue( nextValue ?? '' ) }\n        \/>\n    );\n};\n<\/code><\/pre>\n
Props<\/h2>\n
disabled<\/h3>\n
If true, the input<\/code> will be disabled.<\/p>\n
    \n
  • Type: Boolean<\/code><\/li>\n
  • Required: No<\/li>\n
  • Default: false<\/code><\/li>\n<\/ul>\n
    isPressEnterToChange<\/h3>\n
    If true, the ENTER<\/code> key press is required in order to trigger an onChange<\/code>. If enabled, a change is also triggered when tabbing away (onBlur<\/code>).<\/p>\n
      \n
    • Type: Boolean<\/code><\/li>\n
    • Required: No<\/li>\n
    • Default: false<\/code><\/li>\n<\/ul>\n
      hideLabelFromVision<\/h3>\n
      If true, the label will only be visible to screen readers.<\/p>\n
        \n
      • Type: Boolean<\/code><\/li>\n
      • Required: No<\/li>\n<\/ul>\n
        label<\/h3>\n
        If this property is added, a label will be generated using label property as the content.<\/p>\n
          \n
        • Type: String<\/code><\/li>\n
        • Required: No<\/li>\n<\/ul>\n
          labelPosition<\/h3>\n
          The position of the label (top<\/code>, side<\/code>, bottom<\/code>, or edge<\/code>).<\/p>\n
            \n
          • Type: String<\/code><\/li>\n
          • Required: No<\/li>\n<\/ul>\n
            onChange<\/h3>\n
            A function that receives the value of the input.<\/p>\n
              \n
            • Type: Function<\/code><\/li>\n
            • Required: Yes<\/li>\n<\/ul>\n
              prefix<\/h3>\n
              Renders an element on the left side of the input.<\/p>\n
                \n
              • Type: React.ReactNode<\/code><\/li>\n
              • Required: No<\/li>\n<\/ul>\n
                size<\/h3>\n
                Adjusts the size of the input.
                \nSizes include: default<\/code>, small<\/code><\/p>\n
                  \n
                • Type: String<\/code><\/li>\n
                • Required: No<\/li>\n
                • Default: default<\/code><\/li>\n<\/ul>\n
                  suffix<\/h3>\n
                  Renders an element on the right side of the input.<\/p>\n
                    \n
                  • Type: React.ReactNode<\/code><\/li>\n
                  • Required: No<\/li>\n<\/ul>\n
                    type<\/h3>\n
                    Type of the input element to render. Defaults to “text”.<\/p>\n
                      \n
                    • Type: String<\/code><\/li>\n
                    • Required: No<\/li>\n
                    • Default: “text”<\/li>\n<\/ul>\n
                      value<\/h3>\n
                      The current value of the input.<\/p>\n
                        \n
                      • Type: String<\/code><\/li>\n
                      • Required: No<\/li>\n<\/ul>\n","protected":false},"author":0,"featured_media":0,"parent":134435,"menu_order":303,"template":"","meta":{"footnotes":""},"class_list":["post-134479","blocks-handbook","type-blocks-handbook","status-publish","hentry","type-handbook"],"revision_note":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/developer.wordpress.org\/wp-json\/wp\/v2\/blocks-handbook\/134479","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/developer.wordpress.org\/wp-json\/wp\/v2\/blocks-handbook"}],"about":[{"href":"https:\/\/developer.wordpress.org\/wp-json\/wp\/v2\/types\/blocks-handbook"}],"version-history":[{"count":12,"href":"https:\/\/developer.wordpress.org\/wp-json\/wp\/v2\/blocks-handbook\/134479\/revisions"}],"predecessor-version":[{"id":182985,"href":"https:\/\/developer.wordpress.org\/wp-json\/wp\/v2\/blocks-handbook\/134479\/revisions\/182985"}],"up":[{"embeddable":true,"href":"https:\/\/developer.wordpress.org\/wp-json\/wp\/v2\/blocks-handbook\/134435"}],"wp:attachment":[{"href":"https:\/\/developer.wordpress.org\/wp-json\/wp\/v2\/media?parent=134479"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}