Thumbprint logo

Input Row

Horizontally align inputs and buttons

InputRow with a TextInput and Button

The widthRatios prop in this example tells the input to take up as much space as possible.

<InputRow
  widthRatios={[
    1,
    null
  ]}
>
  <TextInput
    onChange={function _(){}}
    placeholder="Enter a zip code"
  />
  <Button>
    Find a pro
  </Button>
</InputRow>

InputRow with a Dropdown and Button
An InputRow can be used to pair a Dropdown with a Button.
<InputRow>
  <Dropdown
    onChange={function _(){}}
    value="one"
  >
    <option value="one">
      One
    </option>
    <option value="two">
      Two
    </option>
    <option value="three">
      Three
    </option>
  </Dropdown>
  <Button>
    Submit
  </Button>
</InputRow>

If widthRatios is used on the InputRow, isFullWidth must also be passed to the Dropdown.
<InputRow
  widthRatios={[
    1,
    null
  ]}
>
  <Dropdown
    isFullWidth
    onChange={function _(){}}
    size="small"
    value="one"
  >
    <option value="one">
      One
    </option>
    <option value="two">
      Two
    </option>
    <option value="three">
      Three
    </option>
  </Dropdown>
  <Button
    size="small"
    theme="tertiary"
  >
    Submit
  </Button>
</InputRow>

Custom components within InputRow
The Input and Button components use React's Context API to remove their rounded borders when used within an InputRow.
The InputRow exports its React context as InputRowContext. This makes it possible to use custom components within InputRow.
To use InputRowContext, start by importing it within your component:
import { InputRowContext } from '@lib/thumbprint-react';
Within your component's JSX, you'll use <InputRowContext.Consumer> to gain access to three booleans: isWithinInputRow, isFirstInputRowChild, isLastInputRowChild.
Here's an example:
<InputRowContext.Consumer>
    {({ isWithinInputRow, isFirstInputRowChild, isLastInputRowChild }) => <div />}
</InputRowContext.Consumer>
We recommend doing the following with these booleans:
  • Remove your component's right border when isWithinInputRow && !isLastInputRowChild.
  • Remove left rounded corners when isWithinInputRow && !isFirstInputRowChild.
  • Remove right rounded corners when isWithinInputRow && !isLastInputRowChild.
You can learn more about React's Context API in the React documentation.
Props
InputRow
  • children
    required
    Form fields to display.
    

    Type
    React.ReactNode
  • widthRatios
    An array of numbers (or null) that reflect the ratio of the widths of the children.
    

    Examples:
    

      

    • [1, null]: the first child takes up as much space as possible
      • 

    • [1, 1, 1]: splits the width evenly between three elements
      • 

    • [1, 2, 1]: the first and third child have the same width. The middle child is twice as
wide as its siblings.
      • 

    

    The length of the array should be the same as the number of children.
    

    Type
    (number | null)[]
  • dataTestId
    A selector hook into the React component for use in automated testing environments.
    

    Type
    string
  • dataTest
    deprecated
    A selector hook into the React component for use in automated testing environments.
    

    Note: 
    Deprecated in favor of the dataTestId prop
    

    Type
    string