Text

Generates a text input.

Example usage

{{
    form.text({
        'label': 'What’s your name, boss?',
        'id': 'foo'
    })
}}

Outputs:

<div class="form__group">
    <label for="foo" class="control__label">
        What’s your name, boss?
    </label>
    <div class="controls">
        <input id="foo" type="text" class="form__control">
    </div>
</div>

See the Pen docs - form - text by Pulsar (@pulsar) on CodePen.

Options applied to parent wrapper

Option Type Description
append string Text or markup to include after the input element
append_type string Use only when appending a button. button is the only valid value
class string A space separated list of class names
guidance string Text to be displayed in a popover, adds a (?) icon after the input
guidance-container string Element to bind guidance popover scroll behaviour to (default body)
help string Additional guidance information to be displayed next to the input
label string Text for the <label> companion element
prepend string Text or markup to include before the input element
prepend_type string Use only when prepending a button. buttonis the only valid value
required bool Visually indicates that the field must be completed

Options applied to input

Option Type Description
autofocus bool Whether the field should have input focus on page load
disabled bool Stops the element from being interactive if true
form string Specific one or more forms this label belongs to
id string A unique identifier, if required
name string The name of this control
placeholder string A short hint that describes the expected value
required bool Adds required and aria-required="true" attributes
value string Specifies the value of the input
data-* string Data attributes, eg: 'data-foo': 'bar'

Any other options not listed here will be applied to the input.

Error state

{{
    form.checkbox({
        'label': 'Default checkbox',
        'error': 'Something went wrong',
        ...

See the Pen docs - form - text error by Pulsar (@pulsar) on CodePen.

results matching ""

    No results matching ""