Skip to main content


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


validatedbool (optional)falseShows 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.