Text input

The Text input component is the work-horse of any form:

from django import forms

from crispy_forms_gds.helper import FormHelper
from crispy_forms_gds.layout import (
    Field,
    Fieldset,
    Fixed,
    Fluid,
    Layout,
    Size,
    Submit,
)


class TextInputForm(forms.Form):

    name = forms.CharField(
        label="Your name", help_text="Enter your name as it appears on your passport.",
    )

    email = forms.CharField(label="Email", help_text="Enter your email address.",)

    phone = forms.CharField(
        label="Phone", help_text="Enter your home or mobile telephone number.",
    )

    def __init__(self, *args, **kwargs):
        super(TextInputForm, self).__init__(*args, **kwargs)
        self.helper = FormHelper()
        self.helper.label_size = Size.SMALL
        self.helper.layout = Layout(
            Fieldset(
                Field.text("name"),
                Field.text("email", field_width=Fluid.TWO_THIRDS),
                Field.text("phone", field_width=Fixed.TEN),
            ),
            Submit("submit", "Submit"),
        )

You can see this form live in the Demo site.

You can set default sizes for labels and legands on the FormHelper instance. Here we set a default size for all <label> elements to small (‘m’). This can then be overridden on each element that has a legend on a case-by-case basis.

The widths themselves use all the available constants defined on hte Fixed and Fluid classes:

Field.text("ten", field_width=FIXED.TEN),
Field.text("one_quarter", field_width=Fluid.ONE_QUARTER),

You could just use the values directly:

Field.text("ten", field_width=10),
Field.text("one_quarter", field_width="one-quarter"),

The code in the Field class checks to see the value is valid. In the event a new width is added to the Design System and this template pack has not been updated you can always pass in the relevant CSS class directly:

Field("ten", css_class="govuk-input--width-10"),
Field("one_quarter", css_class="govuk-!-width-one-quarter"),