Components

Input Row(React)

Horizontally align inputs and buttons.

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

InputRow with an Input and Button

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

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
    node
  • 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
    arrayOf
    Default
    undefined
  • dataTest

    A selector hook into the React component for use in automated testing environments.

    Type
    string
    Default
    undefined