The Australian Government coat of Arms

Communities of practice

Communities of practice

Form

#1

Moved from: https://github.com/govau/uikit/issues/174

We need a module that gives us basic form layouts.
This should include fieldset and legend support


2 Likes

#4

Hey everyone,

We have come up with a first draft for the form component. The form component contains styling, layout, labelling and inline validations for form fields. This component will be shipped without javascript, and we will look to have several form templates that include javascript validation.

https://design-system-components-featureform-comp-alpha-test.apps.y.cld.gov.au/packages/form/tests/site/
Username: auds
Password: auds

We based most of this on the work done by UK and US government design systems, with flexible positioning for the labels, and error text components.

Form group: was added to allow for some structure and space between form controls. By default a margin top is applied to form groups that are followed by other form groups.
Fieldsets: we reset the default styling for fieldsets to avoid browser inconsistencies.

A point for discussion:

  • is calling the component 'form' potentially confusing? We want this component to be understood as a component that provides the styling and tools such as labels, hint texts, error texts etc to build forms.

If anyone has some initial feedback we would love to hear it!

1 Like

#5

Thanks for posting @sukhraj.ghuman -

The component name form does seem to be an all-inclusive term and potentially at odds with whats demonstrated in the current test. It could easily be interpreted as a reference to a template, rather than a component.

When building a ‘form’, a designer will often need to use multiple templates (or multiple combinations of templates), in addition to per-component assembly.

It could be worth breaking this component down further:

  • form-messages - covering labels, inline validation, hint text, etc.

  • form-groups - covering fieldsets, form groups

Use of legend tags might not neatly fit into either component, nor would fieldset-level validation messages. Page-level validation messages seem to be well-covered already by the page-alerts component.

Additionally, these elements don’t appear to ever be useful in the absence of one or more input components, so an overarching component name like input-assist might offer a better clue as to the purpose of the component.

1 Like

#6

After a lot of thought, the core team have decided to call this component form. Throughout our research it seems that a lot of other design systems also struggle with the name for this component, we’ve seen: form, forms, form-element, fieldset, form-controls and form-templates - none of which clear up exactly what the component is about.

Naming is hard and due to the nature of what this component contains and what it’s intended for there won’t be a perfect name. We have decided to focus our time on writing clear and concise docs on what the component is and how to use it.

1 Like

#7

Cool! this is what we’ve been waiting for.

1 Like

#8

Does it have validation?

1 Like

#9

@guiseppe we have styling for validating form fields though the component is shipped without javascript. We wanted to keep it as minimal as possible in our first release, while still providing value. We will be making some templates involving form fields that have validation shortly though.

0 Likes

#10

Sweet. Looking forward to it. thanks.

2 Likes