Field Control is used in forms to provide context to children fields. Along with Field control it is recommended to use Label and Error Message components.

This is a custom-made component, you can pass name and different states like isRequired, isDisabled, isReadonly, isInvalid & isLoading in it and it will pass it all accordingly to its subcomponents

Anatomy

Import all parts and piece them together.

import { FieldControl, Label, InputField, ErrorMessage } from "@rafty/ui";

<FieldControl>
  <Label />
  <InputField />
  <ErrorMessage />
</FieldControl>;

Usage

<FieldControl name="name">
  <Label>
    Label
  </Label>
  <InputField />
  <ErrorMessage>
    Error message will be displayed here
  </ErrorMessage>
</FieldControl>

Orientation

There are 3 orientation options in field control: row (default), col & row-reverse

<FieldControl
  name="name"
  orientation="row"
>
  <Label>
    Name
  </Label>
  <InputField />
</FieldControl>

IsRequired

isRequired prop is used to show required field. It adds red star (*) after Lable.

<FieldControl
  isRequired
  name="name"
>
  <Label>
    Name
  </Label>
  <InputField />
</FieldControl>

IsDisabled

isDisabled prop is used to disable subcomponent or children field.

<FieldControl
  isDisabled
  name="name"
>
  <Label>
    Name
  </Label>
  <InputField />
</FieldControl>

IsReadOnly

isReadOnly prop is used to change field state to read only.

<FieldControl
  isReadOnly
  name="name"
>
  <Label>
    Name
  </Label>
  <InputField defaultValue="This is a sample default text" />
</FieldControl>

IsInvalid

isInvalid prop is used to show invalid field on certain condition.

<FieldControl
  isInvalid
  name="name"
>
  <Label>
    Name
  </Label>
  <InputField />
</FieldControl>

IsLoading

isLoading prop is used to show a field in a loading state.

<FieldControl
  isLoading
  name="name"
>
  <Label>
    Name
  </Label>
  <InputField />
</FieldControl>

ErrorMessage

ErrorMessage component will display an error message when there is an error during data input in a field or during form submission.

<FieldControl name="name">
  <Label>
    Name
  </Label>
  <InputField />
  <ErrorMessage>
    Error message will be displayed here
  </ErrorMessage>
</FieldControl>