Components
Horizontally align inputs and buttons.
Version: | 14.18.2 •View source•Changelog•Report 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
.
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:
isWithinInputRow && !isLastInputRowChild
.isWithinInputRow && !isFirstInputRowChild
.isWithinInputRow && !isLastInputRowChild
.You can learn more about React’s Context API in the React documentation.
children
Form fields to display.
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.
(number | null)[]
dataTestId
A selector hook into the React component for use in automated testing environments.
string
dataTest
A selector hook into the React component for use in automated testing environments.
Note: Deprecated in favor of the `dataTestId` prop
string