Form layouts
React-standalone-form provides some features to compose a form into various layouts, so you do not need to put additional styles.
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.
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.
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.
Wrap <FormButton>
and other action buttons into <FormActions>
component to position them accordingly and move them away from the fields above.