Design system: Forms

Figma file

Let’s create common components for all forms that aims for consistency and accessibility. There are already some components in /src/components/common/forms.

• Create a single component for field groups (accepts a label, isRequired, and field component prop). Required fields get a readable ‘required’ label

This should then render something like:

<div class...>
<label for={id}>{label} <span>Required</span></label>
{children}
</div>

• Create components for common input elements that use that field group. Something like:

const FormInput = ({type, name, label, isRequired, onChange}) => (
  <FormGroup label={label} isRequired={isRequired} id={name}>
  <input type={text} name={name} id={id} onChange={onChange}/>
</FormGroup>
)

Create one of these for:

• Regular input field, with configurable type prop, i.e. <FormInput type="text"> would render an <input type="text"> in a field group.

• Textarea

• Radio & checkbox (maybe we just pass an array of values?)

• We also need to pass events to these as well, let’s do onChange for now. There is only one form that monitors inputs.

• Support for half-width form groups

Update forms:

• Volunteer form
• Contact form
• Get involved form
• Search page

[kevee]

@tiagofsanchez cool! I’m assigning this issue to you and creating a branch preview for your branch.

[tiagofsanchez]

@kevee, made same progress and should be finishing tonight… did you set up a branch preview? where can I see that? Thank you.