FormControl

FormControls are used to manage form controls and add additional information to them.

Example

Forgot your password?*

Don't worry! Just fill in your email address and we'll send you a link to reset your password.

API

Learn more about the properties and the customization points.

Usage

import FormControl, {
  FormControlLabel,
  FormControlFeedback,
  FormControlDescription
} from "@sonnat/ui/FormControl";

//or
import {
  FormControl,
  FormControlLabel,
  FormControlFeedback,
  FormControlDescription
} from "@sonnat/ui";

Properties

Note that the documentation avoids mentioning all the native props (there are a lot) in this section of the components.

FormControl Properties

FormControl Properties
Name	Type	Default	Description
children	node	-	The content of the component.
className	string	-	Append to the class names applied to the component so you can override or extend the styles.
disabled	boolean	false	If `true`, the form controller will be disabled.
required	boolean	false	If `true`, the form controller will be required.
hasError	boolean	false	If `true`, the form controller will indicate invalid input.
fluid	boolean	false	If `true`, the form controller will be fluid (max-width: 100%)
focused	boolean	false	If `true`, the form controller will be focused.
The `ref` is forwarded to the root element. Any other properties supplied will be provided to the root element.

FormControlLabel Properties

FormControlLabel Properties
Name	Type	Default	Description
children	node	-	The content of the component.
className	string	-	Append to the class names applied to the component so you can override or extend the styles.
disabled	boolean	false	If `true`, the label will appear as disabled.
required	boolean	false	If `true`, the label will indicate required input.
The `ref` is forwarded to the root element. Any other properties supplied will be provided to the root element.

FormControlDescription Properties

FormControlDescription Properties
Name	Type	Default	Description
children	node	-	The content of the component.
className	string	-	Append to the class names applied to the component so you can override or extend the styles.
disabled	boolean	false	If `true`, the description will appear as disabled.
The `ref` is forwarded to the root element. Any other properties supplied will be provided to the root element.

FormControlFeedback Properties

FormControlFeedback Properties
Name	Type	Default	Description
children	node	-	The content of the component.
className	string	-	Append to the class names applied to the component so you can override or extend the styles.
hasError	boolean	false	If `true`, the feedback will indicate invalid input.
The `ref` is forwarded to the root element. Any other properties supplied will be provided to the root element.