Form element

Use to structure a form element from a shell component.

Description

This element should manage the validation of the elements in it. The inputs from inside the .form-element__elements should set the state class (is-error or is-success) to this element and all children should react accordingly.

The shell component is a wrapper comprised of:

  • a label container for the label
  • the form element container for the form element that the user can interact with (e.g. an input, a collection of inputs)
  • a status container for the status message relating to the form element (error/success/warning messages, other statuses related to the input element, etc.).

Activate Sass component

In order to have the styling of this component available, you need to include it in your project. After including the Radius library in your main ./index.scss file, add this snippet:

@include radius-component-form-element;

Usage

  1. HTML
  2. React
<div class="form-element">
  <label class="form-element__label">
    Label element container
  </label>
  <div class="form-element__elements">
    Form elements (inputs, etc.) container
  </div>
  <div class="form-element__status">
    Status (notices) container
  </div>
</div>

To generate this component, wrap your form elements inside of the React component FormElement. This removes the need for repeated code.

Props

  • label: string (or renderable node) (optional)
  • status: string (or renderable node) (optional)
  • success: boolean (optional) (default false)
  • error: boolean (optional) (default false)
  • children: any renderable node (required)

Code example

import FormElement from 'radius/dist/m2dm/react/forms/form-element';

<FormElement
  label="Enter your first name"
  status="this is the first name in your full name"
>
  [place your fields here]
</FormElement>
Form elements (inputs, etc.) container
Status (notices) container