Forms

Form fields are essential to any website or web application. id's' will be auto-generated for input/textarea and labels for attribute, unless manually specifying one. Form Fields Design Guidelines.

Please provide a valid email address.

Edit the code below to see your changes live!

API

Form

Supports all native <form /> element attributes.

Form.Error

Supports all native <p /> element attributes.

Form.Fieldset

Prop NameTypeDefaultDescription
descriptionReactChildPass in a description to display in the fieldset.
legendReactChildPass in a legend to display in the fieldset.

Props ending with * are required

Form.Label

Supports all native <label /> element attributes.

Form.Group

Prop NameTypeDefaultDescription
errorsReact.ReactChild | React.ReactChild[]Pass error(s) into the form group to override child input errors.

Props ending with * are required

Input Types

BigDesign comes with various input types: Input, Checkbox, Radio, Select, and Textarea.

Edit the code below to see your changes live!

Layout

You can up to 3 Input components in row to add more dimension to a Form.Group. Radio and Checkbox components will never display inline inside a Form.Group.

Shipping Method

Edit the code below to see your changes live!

Validation

All form controls are tied to onChange or equivalent event handlers. Validation messages can be passed through the error prop. All input errors in an Form.Group will appear at the bottom of the group component component.

Remove characters to preview validation.

Must be less than or equal to 3 characters long.

You must enter a valid City.

You must enter a valid Postal Code.

Edit the code below to see your changes live!

Beta