FormControl

The form control provides context such as `isInvalid`, `isDisabled`, ìsReadOnly` and `isRequired` to form elements.

Import

import { FormControl } from '@backyard-ui/core';

The htmlFor from Label is set automatically for children’s input.

Sometimes it’s necessary to tell users more details about the form section, so use FormErrorMessage component for that.

Use the isInvalid prop to show up the FormErrorMessage component.

Use the isRequired prop to make a field required.

Use the isReadOnly prop to make a field read-only.

Usage with Select.

label
Description The label is used to describe the form element purpose.
Type
string
id
Description The custom `id` to use for the form control. This is passed directly to the form element (e.g, Input). If not defined, a randomly generated id is used.
Type
string
isDisabled
Description Set the form element to disabled
Type
boolean
isInvalid
Description Set the form element `aria-invalid` to `true`
Type
boolean
isReadOnly
Description Set the form element to readonly
Type
boolean
isRequired
Description Set the form element `aria-required` to `true`
Type
boolean