Form

Basic Form

{% component "Form" %}
                {% component "FormGroup" control_id="exampleInputEmail1" %}
                    {% component "FormLabel" %}Email address{% endcomponent %}
                    {% component "FormControl" type="email" / %}
                {% endcomponent %}
                {% component "Button" type="submit" variant="primary" %}Submit{% endcomponent %}
            {% endcomponent %}

Preview:

Form With Text

{% component "FormGroup" control_id="exampleInputEmail1" %}
                {% component "FormLabel" %}Email address{% endcomponent %}
                {% component "FormControl" type="email" / %}
                {% component "FormText" %}We'll never share your email with anyone else.{% endcomponent %}
            {% endcomponent %}

Preview:

We'll never share your email with anyone else.

Form Checkbox

{% component "FormCheck" attrs:id="exampleCheck1" label="Check me out" / %}

Preview:

Form Radio

{% component "FormCheck" type="radio" name="exampleRadio" attrs:id="exampleRadio1" label="Option one" / %}

Preview:

Form Control Sizes

{% component "FormControl" size="lg" placeholder=".form-control-lg" / %}
            {% component "FormControl" placeholder="Default input" / %}
            {% component "FormControl" size="sm" placeholder=".form-control-sm" / %}

Preview:

Form Control Disabled

{% component "FormControl" placeholder="Disabled input" disabled=True / %}

Preview:

Form Control Readonly

{% component "FormControl" placeholder="Readonly input" readonly=True value="readonly" / %}

Preview:

Form Check Inline

{% component "FormCheck" inline=True attrs:id="inlineCheckbox1" value="option1" label="1" / %}
                {% component "FormCheck" inline=True attrs:id="inlineCheckbox2" value="option2" label="2" / %}

Preview:

Form Check Disabled

{% component "FormCheck" attrs:id="disabledCheck" label="Disabled checkbox" disabled=True / %}

Preview:

Form Switch

{% component "FormCheck" type="switch" attrs:id="flexSwitchCheckDefault" label="Default switch checkbox input" / %}

Preview:

Form Range Basic

{% component "FormRange" / %}

Preview:

Form Range Disabled

{% component "FormRange" disabled=True / %}

Preview:

Form Range Min Max

{% component "FormRange" min=0 max=5 / %}

Preview:

Form Range Step

{% component "FormRange" min=0 max=5 step=0.5 / %}

Preview:

Input Group With Text

{% component "InputGroup" %}
                {% component "InputGroupText" %}@{% endcomponent %}
                {% component "FormControl" placeholder="Username" / %}
            {% endcomponent %}

Preview:

@

Input Group With Button

{% component "InputGroup" %}
                {% component "Button" variant="outline-secondary" type="button" %}Button{% endcomponent %}
                {% component "FormControl" placeholder="" / %}
            {% endcomponent %}

Preview:

Input Group With Checkbox

{% component "InputGroup" %}
                {% component "InputGroupCheckbox" attrs:value="" / %}
                {% component "FormControl" / %}
            {% endcomponent %}

Preview:

Input Group With Radio

{% component "InputGroup" %}
                {% component "InputGroupRadio" attrs:value="" / %}
                {% component "FormControl" / %}
            {% endcomponent %}

Preview:

Input Group Sizing

{% component "InputGroup" size="sm" %}
                {% component "InputGroupText" %}Small{% endcomponent %}
                {% component "FormControl" / %}
            {% endcomponent %}
            {% component "InputGroup" %}
                {% component "InputGroupText" %}Default{% endcomponent %}
                {% component "FormControl" / %}
            {% endcomponent %}
            {% component "InputGroup" size="lg" %}
                {% component "InputGroupText" %}Large{% endcomponent %}
                {% component "FormControl" / %}
            {% endcomponent %}

Preview:

Small
Default
Large

Input Group Multiple Inputs

{% component "InputGroup" %}
                {% component "InputGroupText" %}First and last name{% endcomponent %}
                {% component "FormControl" / %}
                {% component "FormControl" / %}
            {% endcomponent %}

Preview:

First and last name

Input Group Multiple Addons

{% component "InputGroup" %}
                {% component "InputGroupText" %}${% endcomponent %}
                {% component "InputGroupText" %}0.00{% endcomponent %}
                {% component "FormControl" / %}
            {% endcomponent %}

Preview:

$ 0.00

Floating Label Basic

{% component "FloatingLabel" label="Email address" control_id="floatingInput" %}
                {% component "FormControl" type="email" placeholder="name@example.com" / %}
            {% endcomponent %}

Preview:

Floating Label With Textarea

{% component "FloatingLabel" label="Comments" control_id="floatingTextarea" %}
                {% component "FormTextarea" placeholder="Leave a comment here" attrs:style="height: 100px" attrs:rows="5" / %}
            {% endcomponent %}

Preview:

Floating Label With Select

{% component "FloatingLabel" label="Works with selects" control_id="floatingSelect" %}
                {% component "FormSelect" %}
                    <option selected>Open this select menu</option>
                    <option value="1">One</option>
                    <option value="2">Two</option>
                    <option value="3">Three</option>
                {% endcomponent %}
            {% endcomponent %}

Preview:

Form Floating Low Level

{% component "FormFloating" %}
                {% component "FormControl" type="email" attrs:id="floatingInputCustom" placeholder="name@example.com" / %}
                <label for="floatingInputCustom">Email address</label>
            {% endcomponent %}

Preview: