Components

Input Row(React)

Horizontally align inputs and buttons.

Version:14.18.2 View sourceChangelogReport issue
Install:yarn add @thumbtack/thumbprint-react
Import:import { InputRow } from '@thumbtack/thumbprint-react';

InputRow with a TextInput and Button

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

InputRow with a Dropdown and Button

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

If widthRatios is used on the InputRow, isFullWidth must also be passed to the Dropdown.

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 '@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:

  • 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