Skip to main content

Fieldset

Fieldsets encapsulate the composition of form controls, labels & validation messages with the necessary attributes to ensure good accessibility for screen readers.

Table of contents

Inputs

Your full name exactly as stated in your passport
Please enter your full name.

Selects

The final price will be adjusted based on your selection
Please select a cabin class.

Autosuggests

The final price will be adjusted based on your selection
Please select a destination.

Checkboxes

Please accept our terms & conditions to continue.

Textareas

Please ensure if you have additional requirements they are entered here
Please enter any other details you may need.

Implementation

bpk-component-fieldset

Backpack fieldset component.

Installation

npm install bpk-component-fieldset --save-dev

Usage

import React, { Component } from 'react';
import BpkFieldset from 'bpk-component-fieldset';
import BpkInput, { INPUT_TYPES } from 'bpk-component-input';

class FieldsetContainer extends Component {
  constructor(props) {
    super(props);

    this.state = {
      value: '',
    };

  }

  onChange = (e) => {
    this.setState({
      value: e.target.value,
    });
  }

  render() {
    const isValid = this.state.value !== '';

    return (
      <BpkFieldset
        label="Name"
        validationMessage="Please enter a name"
      >
        <BpkInput
          id="name_input"
          name="name"
          type={INPUT_TYPES.text}
          placeholder="e.g. Joe Bloggs"
          value={this.state.value}
          valid={isValid}
        />
      </BpkFieldset>
    );
  }
}

Props

PropertyPropTypeRequiredDefault Value
childrennodetrue-
labelstringtrue-
classNamestringfalsenull
disabledboolfalsefalse
isCheckboxboolfalsefalse
requiredboolfalsefalse
validboolfalsenull
validationMessagestringfalsenull
validationPropsobjectfalse{}
descriptionstringfalsenull

Note: There are a couple of props that behave differently when using isCheckbox:

  • valid: checkboxes don't have a valid prop so you have to apply it to the fieldset directly
  • label: checkboxes have their own labels so it's safe to omit these