{% import "_includes/forms" as forms %}

{{ forms.textField({
    label: "Default Value"|t('freeform'),
    instructions: "The default value for the field."|t('freeform'),
    id: "value",
    name: "types[phone][value]",
    value: field.getMetaProperty('value'),
    errors: field.getErrors("value"),
    required: false
}) }}

{{ forms.textField({
    label: "Placeholder"|t('freeform'),
    instructions: "The default text that will be shown if the field doesn’t have a value."|t('freeform'),
    id: "placeholder",
    name: "types[phone][placeholder]",
    value: field.getMetaProperty("placeholder"),
    errors: field.getErrors("placeholder"),
    required: false
}) }}

<hr>

{{ forms.lightSwitchField({
    label: "Use JS validation"|t('freeform'),
    instructions: "Enable this to force JS to validate the input on this field based on the pattern."|t('freeform'),
    name: 'types[phone][useJsMask]',
    on: field.getMetaProperty('useJsMask'),
}) }}

{{ forms.textField({
    label: "Pattern"|t('freeform'),
    instructions: "Custom phone pattern (e.g. '(000) 000-0000' or '+0 0000 000000'), where '0' stands for a digit between 0-9. If left blank, any number and dash, dot, space, parentheses and optional + at the beginning will be validated."|t('freeform'),
    name: "types[phone][pattern]",
    value: field.getMetaProperty('pattern'),
}) }}