Form Inputs

Input, Textarea, Select, and Checkbox form fields with validation support.

Important Constraints

No placeholder text: Input, TextArea, and SelectBox do NOT support placeholder text. Use a Paragraph/V1 element above as a label instead.

No label elements: CF2 doesn't use HTML <label> tags. Use Paragraph/V1 for form field labels.

Input/V1

JSON

{
  "type": "Input/V1",
  "id": "6Z-InpEx-0",
  "version": 0,
  "parentId": "6Z-Parent-0",
  "fractionalIndex": "a0",
  "attrs": {
    "type": "email"
  },
  "params": {
    "label": "Email",
    "type": "email",
    "--style-background-color": "#ffffff"
  },
  "selectors": {
    ".elInput": {
      "attrs": {
        "name": "email",
        "type": "email",
        "className": "required1"
      }
    },
    ".inputHolder, .borderHolder": {
      "attrs": {
        "style": {
          "padding-top": 12,
          "padding-bottom": 12
        }
      },
      "params": {
        "--style-padding-horizontal": 12,
        "--style-padding-horizontal--unit": "px",
        "--style-border-width": 1,
        "--style-border-width--unit": "px",
        "--style-border-style": "solid",
        "--style-border-color": "rgba(0, 0, 0, 0.2)"
      }
    },
    "&.elFormItemWrapper, .inputHolder, .borderHolder": {
      "attrs": {
        "style": { "border-radius": 4 },
        "data-skip-corners-settings": "false"
      },
      "params": {
        "border-radius--unit": "px"
      }
    }
  }
}

Input Types and Names

Input Type	Name	Description
`email`	`email`	Email address field
`text`	`full_name`	Full name field
`text`	`first_name`	First name field
`text`	`last_name`	Last name field
`tel`	`phone_number`	Phone number field

Validation Classes

Class	Description
`required1`	Field is required
`required0`	Field is optional

Textarea/V1

JSON

{
  "type": "Textarea/V1",
  "id": "6Z-TxtAr-0",
  "version": 0,
  "parentId": "6Z-Parent-0",
  "fractionalIndex": "a0",
  "params": {
    "label": "Message",
    "--style-background-color": "#ffffff"
  },
  "selectors": {
    ".elTextarea": {
      "attrs": {
        "name": "message",
        "className": "required1"
      }
    },
    ".inputHolder, .borderHolder": {
      "attrs": {
        "style": { "padding-top": 12, "padding-bottom": 12 }
      },
      "params": {
        "--style-padding-horizontal": 12,
        "--style-border-width": 1,
        "--style-border-style": "solid",
        "--style-border-color": "rgba(0, 0, 0, 0.2)"
      }
    }
  }
}

Select/V1

JSON

{
  "type": "Select/V1",
  "id": "6Z-SelEx-0",
  "version": 0,
  "parentId": "6Z-Parent-0",
  "fractionalIndex": "a0",
  "params": {
    "label": "Select Option",
    "--style-background-color": "#ffffff"
  },
  "selectors": {
    ".elSelect": {
      "attrs": {
        "name": "selection",
        "className": "required1"
      }
    }
  }
}

Checkbox/V1

JSON

{
  "type": "Checkbox/V1",
  "id": "6Z-ChkEx-0",
  "version": 0,
  "parentId": "6Z-Parent-0",
  "fractionalIndex": "a0",
  "selectors": {
    ".elCheckbox": {
      "attrs": {
        "name": "agree_terms",
        "className": "required1"
      }
    }
  }
}