Form Group

FormGroup components are wrappers that create controlled heirarchy of inner form elements and include a bottom margin to separate form elements into their respective groupings.

Implementation#

import { FormGroup } from "slipstream-ui";

const Example = () => <FormGroup>...</FormGroup>;

Example#

Example

First Name

Last Name

<FormGroup>
  <Label>First Name</Label>
  <Input name="firstName" type="text" />
</FormGroup>

Inline#

Example

First Name

Last Name

<FormGroup inline>
  <Label className="pr-2">First Name</Label>
  <Input name="firstName" type="text" />
</FormGroup>

Props#

Attribute	Type	Value	Default Value	Description
margin	string		undefined	Replaces margin classes with user defined margin classes
inline	boolean	true/false	undefined	Sets Label and Input inline removing margins and full width