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.
pipeline 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).
Usage Example#
(to view component preview, scroll to bottom of page)
import { Box, Form, Input, Select, Field, Button, Text, Checkbox, Radio} from "pipeline-ui";Live Editor
Result
Props#
| Prop | Type | Default | Description |
|---|---|---|---|
| validated | bool (optional) | false | Shows the input validation styles when true by adding the `.was-validated` class to the form element. |
Form uses COMMON, LAYOUT, POSITION, FLEXBOX, BORDERS groups of Styled System props.