Form

The Form component provides a wrapped version of the HTML <form> element.

Native HTML5 form validation

For native HTML form validation–available in all our supported browsers, the :valid and :invalid pseudo selectors are used to apply validation styles as well as display feedback messages.
Rimble scopes the :valid and :invalid styles to parent .was-validated class, usually applied to the Form (you can use the validated prop as a shortcut). Otherwise, any required field without a value shows up as invalid on page load. This way, you may choose when to activate them (typically after form submission is attempted).
Import component
import { Form } from 'rimble-ui';

Example

import { Button, Form } from 'rimble-ui';

Props

Prop NameTypeIs RequiredDefault ValueDescription
validatedbooloptional
false
Shows the input validation styles when true by adding he `.was-validated` class to the form element.
Styled System Props
Form uses COMMON, LAYOUT, POSITION, FLEXBOX, BORDERS groups of Styed System props.
(ノ◕ヮ◕)ノ*:・゚✧

Are we missing anything?

If you have any extra insight you'd like to add, please raise an issue in Github.
Contribute