@automattic/form-components

Form Components

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.

• clipboard-button
• counted-textarea
• form-button
• form-buttons-bar
• form-checkbox
• form-country-select
• form-currency-input
• form-fieldset
• form-input-validation
• form-label
• form-legend
• form-password-input
• form-phone-input
• form-phone-media-input
• form-radio
• form-range
• form-section-heading
• form-select
• form-setting-explanation
• form-tel-input
• form-text-input
• form-text-input-with-action
• form-text-input-with-affixes
• form-textarea
• form-toggle
• multi-checkbox
• range
• sortable-list

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 /assets/stylesheets/_components.scss.

FormSectionHeading

The FormSectionHeading component allows you to add a section header to your settings form.

FormInputValidation

The FormInputValidation component is used to display a validation notice to the user. You can use it like this:

<FormInputValidation isError={ true } text="Usernames can only contain lowercase letters (a-z) and numbers." />
<FormInputValidation text="That username is valid." />

MultiCheckbox

See README.md for MultiCheckbox

SelectOptGroups

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: 1
            },
            {
                label: 'Option 2',
                value: 2
            }
        ]
    },
    {
        label: 'Group 2',
        options: [
            {
                label: 'Option 3',
                value: 3
            },
            {
                label: 'Option 4',
                value: 4
            }
        ]
    }
],
initialSelected = 3;
 
<SelectOptGroups name="example" value={ initialSelected } options={ options } />

And this would render:

<select name="example">
    <optgroup label="Group 1">
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
    </optgroup>
    <optgroup label="Group 1">
        <option value="3" selected>Option 3</option>
        <option value="4">Option 4</option>
    </optgroup>
</select>

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 className, onChange, etc.