# Form Component Blocks

Form component blocks collect input from users. All form input blocks have two required attributes: `sfdc_cms:formInputLabelProperty` (the field label) and `sfdc_cms:formInputNameProperty` (the field name).

## lightning/inputText

A field that accepts one line of input text.

| Attribute                         | Type    | Description                                                                                                                     |
| --------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------- |
| `sfdc_cms:formInputLabelProperty` | string  | Required. The label shown above the input field to describe what the user should enter.                                         |
| `sfdc_cms:formInputNameProperty`  | string  | Required. The internal name for the field. Use this field to identify the form after it’s submitted.                            |
| `maxLength`                       | integer | Required. The maximum number of characters a user can enter in the field. The maximum value is `10000`.                         |
| `placeholder`                     | string  | The text that’s shown in the input field before the user types anything. Use this text to suggest the expected format or value. |
| `width`                           | object  | The width of the input field within its container.                                                                              |

This example shows how to create a basic input text field.

```sfdocs-code {"lang":"json", "title":"Example"}
{
  "type": "block",
  "definition": "lightning/inputText",
  "attributes": {
    "sfdc_cms:formInputLabelProperty": "Full Name",
    "sfdc_cms:formInputNameProperty": "fullName",
    "maxLength": 100,
    "placeholder": "Enter your full name"
  }
}
```

## lightning/inputEmail

A field for inputting an email address. This block type performs validation to make sure that the input value is a valid email address.

| Attribute                         | Type    | Description                                                                                                                     |
| --------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------- |
| `sfdc_cms:formInputLabelProperty` | string  | Required. The label shown above the input field to describe what the user should enter.                                         |
| `sfdc_cms:formInputNameProperty`  | string  | Required. The internal name for the field. Use this field to identify the form after it’s submitted.                            |
| `maxLength`                       | integer | Required. The maximum number of characters a user can enter in the field. The maximum value is `10000`.                         |
| `placeholder`                     | string  | The text that’s shown in the input field before the user types anything. Use this text to suggest the expected format or value. |

This example shows how to create a basic email entry field.

```sfdocs-code {"lang":"json", "title":"Example"}
{
  "type": "block",
  "definition": "lightning/inputEmail",
  "attributes": {
    "sfdc_cms:formInputLabelProperty": "Email Address",
    "sfdc_cms:formInputNameProperty": "email",
    "maxLength": 255,
    "placeholder": "Enter your email address..."
  }
}
```

## lightning/inputCheckbox

A checkbox input for boolean values, such as opt-in or agreement confirmations.

| Attribute                         | Type   | Description                                                                                           |
| --------------------------------- | ------ | ----------------------------------------------------------------------------------------------------- |
| `sfdc_cms:formInputLabelProperty` | string | Required. The label shown next to the checkbox to describe what the user is agreeing to or selecting. |
| `sfdc_cms:formInputNameProperty`  | string | Required. The internal name for the field. Use this field to identify the form after it’s submitted.  |

This example shows how to create a simple checkbox.

```sfdocs-code {"lang":"json", "title":"Example"}
{
  "type": "block",
  "definition": "lightning/inputCheckbox",
  "attributes": {
    "sfdc_cms:formInputLabelProperty": "Subscribe to our newsletter",
    "sfdc_cms:formInputNameProperty": "subscribe"
  }
}
```

## lightning/inputDropdown

A dropdown list that contains several predefined options.

| Attribute                         | Type   | Description                                                                                                                                                                                                 |
| --------------------------------- | ------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `sfdc_cms:formInputLabelProperty` | string | Required. The label shown above the dropdown to describe what the user should select.                                                                                                                       |
| `sfdc_cms:formInputNameProperty`  | string | Required. The internal name for the field. Use this field to identify the form after it’s submitted.                                                                                                        |
| `options`                         | array  | Required. The list of selectable options in the dropdown. Each option requires a `label` string, which is visible to the user, and a `value` string, which is an identifier that’s submitted with the form. |
| `placeholder`                     | string | The text that’s shown in the dropdown before the user selects an option. Use this property to prompt the user to select an option.                                                                          |

This example shows how to create a basic dropdown list with two options.

```sfdocs-code {"lang":"json", "title":"Example"}
{
  "type": "block",
  "definition": "lightning/inputDropdown",
  "attributes": {
    "sfdc_cms:formInputLabelProperty": "Country",
    "sfdc_cms:formInputNameProperty": "country",
    "placeholder": "Select your country...",
    "options": [
      { "label": "Canada", "value": "CA" },
      { "label": "United States", "value": "US" }
    ]
  }
}
```

## Related Items

- [Content Component Blocks](/docs/marketing/marketing-cloud-growth/guide/mc-manage-component-blocks.md)