Input Row

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

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

An InputRow can be used to pair a Dropdown with a Button.

<InputRow>
  <Dropdown
    onChange={function w(){}}
    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 w(){}}
    size="small"
    value="one"
  >
    <option value="one">
      One
    </option>
    <option value="two">
      Two
    </option>
    <option value="three">
      Three
    </option>
  </Dropdown>
  <Button
    size="small"
    theme="secondary"
  >
    Submit
  </Button>
</InputRow>

The v2 components read the same context as their v1 counterparts, so they can be paired within an InputRow too. Match the heights by size: xlarge for a large input, large for a small one. The ButtonV2 width prop is ignored within a row — the button fills its cell so widthRatios governs the layout.

Describe the row as a whole with a Label and FormNote rather than with the TextInputV2 label, description, and errorMessage props: those render above and below the input box, which knocks it out of line with its siblings.

<InputRow
  widthRatios={[
    1,
    null
  ]}
>
  <TextInputV2
    accessibilityLabel="Zip code"
    onChange={function w(){}}
    placeholder="Enter a zip code"
  />
  <ButtonV2>
    Find a pro
  </ButtonV2>
</InputRow>

The Input and Button components — and their TextInputV2 and ButtonV2 counterparts — 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 '@thumbtack/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:

You can learn more about React's Context API in the React documentation.