@automattic/form-components

0.1.0-alpha.3 • Public • Published

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.

Dependencies (4)

Dev Dependencies (0)

    Package Sidebar

    Install

    npm i @automattic/form-components

    Weekly Downloads

    1

    Version

    0.1.0-alpha.3

    License

    GPL-2.0+

    Last publish

    Collaborators

    • porada
    • imranh920
    • gmjuhasz
    • rcarvalho
    • briowill
    • bgrgicak
    • dhenridev
    • daledupreez-a8c
    • jeherve
    • yuliyan
    • micbosia8c
    • jeremy.yip
    • wpvip-bot
    • etobiesen
    • kzoschke
    • brunobasto
    • kat3samsin
    • fmfernandes
    • newspack
    • robertsreberski_a8c
    • msurdi-a8c
    • chihsuan
    • manzoorwanijk
    • rjchow
    • andrea-sdl
    • scjr
    • spsiddarthan
    • t2dw4t
    • ehg_
    • wwa
    • sirreal
    • elazzabi
    • royho
    • luismulinari
    • macbre
    • mjangda
    • matticbot
    • a8c
    • blowery
    • noahtallen
    • hanifn
    • sgomes
    • tyxla
    • saroshaga
    • parkcityj
    • nejclovrencic
    • sirbrillig
    • chriszarate
    • robersongomes
    • johngodley