Text

Used to create a single-line, plain-text input field where users can enter free-form text. For quick reference, see technical parameters.

Best practices

  • Use in forms for questions requiring short answers such as name and email.
  • Write clear and specific labels.

Example


                    [Text placeholder="Placeholder"]Text Component[/Text]
                
<div class="bocss-input__group" data-field-name="text-2">
    <label class="bocss-label" id="bocss-text-2-label" for="bocss-text-2">Text Component</label>
    <input type="text" name="text-2" id="bocss-text-2" class="bocss-input__text"
         placeholder="Placeholder"
         aria-labelledby="bocss-text-2-label"
         autocomplete="on">
    </div>

Parameters

Parameter Values Description
arialabel user‑specified Field label for accessibility purposes
autocomplete on, off Enable or disable autocomplete
default_value user‑specified Set a default numeric value. Applies only to the "number" type.
disabled true, false Disables the field
id user‑specified HTML id of the field
label user‑specified Label of the field. The content enclosed within the shortcode tags populates this field.
layout full, 1, 2, 3 Layout of the field
max user‑specified The highest numeric value that can be entered. Applies only to the "number" type.
min user‑specified The lowest numeric value that can be entered. Applies only to the "number" type.
name user‑specified HTML name of the field
placeholder user‑specified Placeholder content for the field. Applies to all types except "number".
required true, false Set to “true” to make the field mandatory.
type email, number, tel, text, url Type of text field