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

<\/p>\n

See the WordPress Storybook<\/a> for more detailed, interactive documentation.<\/p>\n

BaseControl<\/code> is a low-level component used to generate labels and help text for components handling user inputs.<\/p>\n

import { BaseControl, useBaseControlProps } from '@wordpress\/components';\n\n\/\/ Render a `BaseControl` for a textarea input\nconst MyCustomTextareaControl = ({ children, ...baseProps }) => (\n    \/\/ `useBaseControlProps` is a convenience hook to get the props for the `BaseControl`\n    \/\/ and the inner control itself. Namely, it takes care of generating a unique `id`,\n    \/\/ properly associating it with the `label` and `help` elements.\n    const { baseControlProps, controlProps } = useBaseControlProps( baseProps );\n\n    return (\n        <BaseControl { ...baseControlProps }>\n            <textarea { ...controlProps }>\n              { children }\n            <\/textarea>\n        <\/BaseControl>\n    );\n);\n<\/code><\/pre>\nProps<\/h2>\n
as<\/code><\/h3>\n\nType: \"symbol\" | \"object\" | \"a\" | \"abbr\" | \"address\" | \"area\" | \"article\" | \"aside\" | \"audio\" | \"b\" | ...<\/code><\/li>\n
Required: Yes<\/li>\n<\/ul>\nThe HTML element to render the component as.<\/p>\n
className<\/code><\/h3>\n\nType: string<\/code><\/li>\n
Required: No<\/li>\n<\/ul>\nchildren<\/code><\/h3>\n\nType: ReactNode<\/code><\/li>\n
Required: Yes<\/li>\n<\/ul>\nThe content to be displayed within the BaseControl<\/code>.<\/p>\n
help<\/code><\/h3>\n\nType: ReactNode<\/code><\/li>\n
Required: No<\/li>\n<\/ul>\nAdditional description for the control.<\/p>\n
Only use for meaningful description or instructions for the control. An element containing the description will be programmatically associated to the BaseControl by the means of an aria-describedby<\/code> attribute.<\/p>\n
hideLabelFromVision<\/code><\/h3>\n\nType: boolean<\/code><\/li>\n
Required: No<\/li>\n
Default: false<\/code><\/li>\n<\/ul>\nIf true, the label will only be visible to screen readers.<\/p>\n
id<\/code><\/h3>\n\nType: string<\/code><\/li>\n
Required: No<\/li>\n<\/ul>\nThe HTML id<\/code> of the control element (passed in as a child to BaseControl<\/code>) to which labels and help text are being generated.
\nThis is necessary to accessibly associate the label with that element.<\/p>\n
The recommended way is to use the useBaseControlProps<\/code> hook, which takes care of generating a unique id<\/code> for you.
\nOtherwise, if you choose to pass an explicit id<\/code> to this prop, you are responsible for ensuring the uniqueness of the id<\/code>.<\/p>\n
label<\/code><\/h3>\n\nType: ReactNode<\/code><\/li>\n
Required: No<\/li>\n<\/ul>\nIf this property is added, a label will be generated using label property as the content.<\/p>\n
Subcomponents<\/h2>\n
BaseControl.VisualLabel<\/h3>\nBaseControl.VisualLabel<\/code> is used to render a purely visual label inside a BaseControl<\/code> component.<\/p>\n
It should only be used in cases where the children being rendered inside BaseControl<\/code> are already accessibly labeled,
\ne.g., a button, but we want an additional visual label for that section equivalent to the labels BaseControl<\/code> would
\notherwise use if the label<\/code> prop was passed.<\/p>\n
import { BaseControl } from '@wordpress\/components';\n\nconst MyBaseControl = () => (\n    <BaseControl help=\"This button is already accessibly labeled.\">\n        <BaseControl.VisualLabel>Author<\/BaseControl.VisualLabel>\n        <Button>Select an author<\/Button>\n    <\/BaseControl>\n);\n<\/code><\/pre>\nProps<\/h4>\n
as<\/code><\/h5>\n\nType: keyof IntrinsicElements | JSXElementConstructor<any><\/code><\/li>\n
Required: No<\/li>\n<\/ul>\nThe HTML element or React component to render the component as.<\/p>\n
children<\/code><\/h5>\n\nType: ReactNode<\/code><\/li>\n
Required: Yes<\/li>\n<\/ul>\nThe content to be displayed within the BaseControl.VisualLabel<\/code>.<\/p>\n","protected":false},"author":0,"featured_media":0,"parent":134435,"menu_order":243,"template":"","meta":{"footnotes":""},"class_list":["post-134440","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\/134440","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":18,"href":"https:\/\/developer.wordpress.org\/wp-json\/wp\/v2\/blocks-handbook\/134440\/revisions"}],"predecessor-version":[{"id":182923,"href":"https:\/\/developer.wordpress.org\/wp-json\/wp\/v2\/blocks-handbook\/134440\/revisions\/182923"}],"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=134440"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}