Input Row(React)

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

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

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

<InputRow>
    <Dropdown onChange={() => {}} 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 size="small" onChange={() => {}} value="one" isFullWidth>
        <option value="one">One</option>
        <option value="two">Two</option>
        <option value="three">Three</option>
    </Dropdown>
    <Button size="small" theme="tertiary">
        Submit
    </Button>
</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 '@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.