Field Wrapper

A utility component to help with composing consistent form fields

FieldWrapper renders a Label and (when applicable) a InlineMessage. Use it to wrap any type of input to create a consistent set of form fields.

<FieldWrapper label="Example Field" fieldId="example">
  <Input name="example" id="example" />
</FieldWrapper>

InlineFieldWrapper does the same but renders the label inline with the input, for example:Checkboxes and Radios.

<InlineFieldWrapper label="Example Checkbox">
  <Checkbox name="example2" id="example2" />
</InlineFieldWrapper>

It can also be used alongside components like Input, Select or Switch when you may require some condensed inline fields. You can use the direction and align props to handle how the label is positioned relative to the component, in this case the label is placed on the right with direction="reverse" and it's aligned centrally with the switch.

<InlineFieldWrapper direction="reverse" align="center" label="Toggle a field">
  <Switch />
</InlineFieldWrapper>

API Reference