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

| Property | PropType | Required | Default Value | | ----------------- | -------- | -------- | ------------- | | children | node | true | - | | label | string | true | - | | className | string | false | null | | disabled | bool | false | false | | isCheckbox | bool | false | false | | required | bool | false | false | | valid | bool | false | null | | validationMessage | string | false | null | | validationProps | object | false | {} | | description | string | false | null |

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