This is a directory of shared form components.
Settings Form Fields
The following form components were created as an effort to minimize duplication between site settings and me settings.
The component jsx files are wrappers that ensure our classes are added to each form field. Each form field component also contains a
style.scss file in its directory for styling. These stylesheets are included in
FormSectionHeading component allows you to add a section header to your settings form.
FormInputValidation component is used to display a validation notice to the user. You can use it like this:
<FormInputValidation = ="Usernames can only contain lowercase letters (a-z) and numbers." /><FormInputValidation ="That username is valid." />
SelectOptGroups allows you to pass structured data to render a select element with
<option> elements nested inside
<optgroup> separators. You can use it like this:
const options =label: 'Group 1'options:label: 'Option 1'value: 1label: 'Option 2'value: 2label: 'Group 2'options:label: 'Option 3'value: 3label: 'Option 4'value: 4initialSelected = 3;<SelectOptGroups ="example" = = />
And this would render:
Option 1Option 2Option 3Option 4
Any valid jsx attributes that are passed to
<SelectOptGroup> will also get passed to the rendered
<select> element, so you can also pass in attributes like