react-accessible-form

React Accessible Form ·

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

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} />} />