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

Supports all native <form /> element attributes.

Form

Prop Name
Type
Default
Description
fullWidthbooleanfalse

Sets the form width to 100%

Props ending with * are required

FormControlError

Supports all native <p /> element attributes.

FormControlLabel

Supports all native <label /> element attributes.

FormControlDescription

Supports all native <p /> element attributes.

FormGroup

Prop Name
Type
Default
Description
errorsReact.ReactChild | React.ReactChild[]

Pass error(s) into the form group to override child input errors.

Props ending with * are required

Fieldset

Prop Name
Type
Default
Description
descriptionstring | FieldsetDescription

Pass in a description to display in the fieldset. Will render nothing if not the correct type.

legendstring | FieldsetLegend

Pass in a legend to display in the fieldset. Will render nothing if not the correct type.

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 FormGroup. Radio and Checkbox components will never display inline inside a FormGroup.

    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 FormGroup 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