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"),