React Accessible Form

React Accessible Form handles makes layout and accessibility easy when writing forms.

Try the other libaries in the series! React Stateful Tabs, React Smart Promise, React Use Pagination

Example

<Form.Group layout="aligned" required>
    <Form.Label>Email Addresses</Form.Label>
    <Form.Control type="email" />
    <small>Separated by semicolon (;)</small>
</Form.Group>

Without react-accessible-form:

<div className="form-group form-group--aligned">
    <div className="form-group-section">
        <label for="email_field" className="form-label--required">
            Email Addresses
        </label>
    </div>
    <div className="form-group-section">
        <input type="email" class="form-control" id="email_field" required />
        <small>Separated by semicolon (;)</small>
    </div>
</div>

Features

• Optionally generates a unique id for the label’s htmlFor and input’s id props and links them
• Applies BEM-formatted classNames to all of the components to make theming straightforward
• Allows usage of any custom controls with as prop on Form.Control
• Zero-overhead integration with form state libraries like Formik and React-Final-Form
• Optional set of base styles that help with aligned form layouts

Form Props

as

Type: React.ElementType Required: false Default: "form"

Changes the underlying element of the Form component.

disabled

Type: boolean Required: false Default: false

Sets the disabled prop on all children Form.Control components.

layout

Type: "stacked" | "aligned" Required: false Default: "stacked"

Propagates down to all of the children Form.Group components. stacked is the default, which is to set all of the children to display: block. aligned splits all of Form.Group’s children into two groups: "label", and "rest" so that all of the form’s labels will align to the same width.

Form.Group Props

id

Type: string Required: false Default: UUIDv4()

The id to set on the Form.Control and associated htmlFor to set on the Form.Label

required

Type: boolean Required: false Default: false

Set classNames on the label to indicate a required field, and set the required prop on the Form.Control

disabled

Type: boolean Required: false Default: false

Set classNames on the label to indicate a disabled field, and set the disabled prop on the Form.Control

Form.Control Props

as

Type: React.ElementType Required: false Default: "input"

Examples

Built-in element

<Form.Control as="select">
    <option value="AL">Alabama</option>
    <option value="AK">Alaska</option>
    <option value="AZ">Arizona</option>
</Form.Control>

Custom element

<Form.Control as={ReactSelect} options={[{value: "AL", label: "Alabama"}]} />

Overriding props

<Form.Control as={({className, ...props}) => <ReactSelect className="custom" {...props} />} />