UikFormInputGroup

A simple divider, basically just a 1px grey line matching border color.

PropertyTypeRequiredDefault ValueDescription
classNameStringfalsenullclassName, e.g. "my-custom-styling"
ComponentReact.ElementTypefalsedivRenders the component with a given react element. By default, the component renders <div />. This is usefull when you want to use a same style but render a different HTML element or your custom component. Read and see more examples here.
childrenReact.Nodefalsenull
directionStringfalsevertical"horizontal" or "vertical", creates spacing between elements in that direction
...restanyfalseOther properties are passed down to the wrapping element

UikFormInputGroup Examples

ComponentExample Code
Your Name
Your Email
// Without groups
<UikInput
  label="Your Name"
  placeholder="John Smith"
/>
<UikInput
  label="Your Email"
  placeholder="[email protected]"
/>
<UikButton primary>
  Save
</UikButton>
Your Name
Your Email
// With group
<UikFormInputGroup>
  <UikInput
    label="Your Name"
    placeholder="John Smith"
  />
  <UikInput
    label="Your Email"
    placeholder="[email protected]"
  />
  <UikButton primary>
    Save
  </UikButton>
</UikFormInputGroup>
Your Name
Your Email
// With group and splitted inputs
<UikFormInputGroup>
  <UikFormInputGroup direction="horizontal">
    <UikInput
      label="Your Name"
      placeholder="John Smith"
    />
    <UikInput
      label="Your Email"
      placeholder="[email protected]"
    />
  </UikFormInputGroup>
  <UikButton primary>
    Save
  </UikButton>
</UikFormInputGroup>