This block is experimental and may change or be removed without notice.
The basic building block for forms.
- Name:
core/form-input - Category: widgets
- API Version: 3
- Block Type: Hybrid (static save + server enhancements)
- Keywords:
input,form
Block Relationships
Attributes
Defined via the attributes property in block.json.
| Attribute | Type | Default | Description |
|---|---|---|---|
type |
string |
"text" |
— |
name |
string |
— | — |
label |
rich-text |
"Label" |
Source: rich-text. Selector: .wp-block-form-input__label-content. Role: content |
inlineLabel |
boolean |
false |
— |
required |
boolean |
false |
Source: attribute. Selector: .wp-block-form-input__input. HTML attr: required |
placeholder |
string |
— | Source: attribute. Selector: .wp-block-form-input__input. HTML attr: placeholder. Role: content |
value |
string |
"" |
Source: attribute. Selector: input. HTML attr: value |
visibilityPermissions |
string |
"all" |
— |
Supports
Defined via the supports property in block.json.
Block Markup
This is a hybrid block. It saves static markup that the server may enhance during rendering.
<!-- wp:form-input -->
<div class="wp-block-form-input"><label class="wp-block-form-input__label"><span class="wp-block-form-input__label-content">Label</span><input class="wp-block-form-input__input" type="text" name="label" aria-required="false"/></label></div>
<!-- /wp:form-input -->
<!-- wp:form-input {"type":"email"} -->
<div class="wp-block-form-input"><label class="wp-block-form-input__label"><span class="wp-block-form-input__label-content">Label</span><input class="wp-block-form-input__input" type="email" name="label" aria-required="false"/></label></div>
<!-- /wp:form-input -->
<!-- wp:form-input {"type":"number"} -->
<div class="wp-block-form-input"><label class="wp-block-form-input__label"><span class="wp-block-form-input__label-content">Label</span><input class="wp-block-form-input__input" type="number" name="label" aria-required="false"/></label></div>
<!-- /wp:form-input -->
<!-- wp:form-input {"type":"tel"} -->
<div class="wp-block-form-input"><label class="wp-block-form-input__label"><span class="wp-block-form-input__label-content">Label</span><input class="wp-block-form-input__input" type="tel" name="label" aria-required="false"/></label></div>
<!-- /wp:form-input -->
<!-- wp:form-input {"type":"url"} -->
<div class="wp-block-form-input"><label class="wp-block-form-input__label"><span class="wp-block-form-input__label-content">Label</span><input class="wp-block-form-input__input" type="url" name="label" aria-required="false"/></label></div>
<!-- /wp:form-input -->
Source
- block.json (reference)
- Source directory — browse
edit.js,save.js,index.php, and more.