Field

Wrapper component for form inputs with label and validation support.

Installation

Add the component to your project using the following command:

Usage

Import

Import the component and its related parts.

import {
  Field,
  FieldItem,
  FieldLabel,
  FieldDescription,
  FieldError,
  FieldValidity
} from "components/selia/field";

Structure

The expected structure and composition of the component. This component does not have its own control element, it is expected to be used with a control element, such as an input, textarea, select, etc.

<Field>
  <FieldLabel>Label</FieldLabel>
  <Input />
  <FieldError>Invalid</FieldError>
  <FieldDescription>Description</FieldDescription>
</Field>

Examples

Control

Field could contain a control element, such as an input, textarea, select, etc. Here is an example of a field containing a select element.