Skip to content

Form layouts

Michał Kokociński edited this page Mar 21, 2022 · 3 revisions

React-standalone-form provides some features to compose a form into various layouts, so you do not need to put additional styles.

Inline label

By default, field label is displayed above the field. You can move it to left by adding the inlineLabel prop to a particular field. Inline label will always have the same width, which is configurable in a theme.

Fields in one row

To combine multiple fields into one row, put them into <Row> component. Wrapped fields will be displayed next to another with a proper gap between. On smaller screens they will keep the default column behavior.

Inputs in Subscribe box style.

To combine elements into one row, where all elements should be the same height, not include any spacing and not have a border radius in between, put them into <Combine> component. The common use case of this component is a combination of email input with Subscribe button of a subscribtion form.

Form action buttons group

Wrap <FormButton> and other action buttons into <FormActions> component to position them accordingly and move them away from the fields above.

Examples

Edit live example