InputGroup

v1.4.6Edit this page

This component wraps an input, providing a label, help text and tooltip.

Usage

Loading...

Loading examples...

Props

<InputGroup>

InputGroup renders the given input wrapped with proper spacing and support for a label, help text, tooltip, and error state.

Name

Description

Type

Default

inputId

Id of input, required if you are using a tooltip

string

null

input

Rendered input (e.g., `<Input />`)

node

label

A label for the input

node

null

error

Flag to indicate if input is in an error (red outline) state. Use in conjunction with errorMessage to display a red error message.

bool

false

errorMessage

Red text to be shown indicating the user is in an error state.

node

or

string

null

help

@deprecated Please use helpMessage.

node

null

helpMessage

Optional help text shown below the input

node

or

string

null

tooltip

Optional tooltip shown via an icon next to the label

node

null

tooltipPlacement

Positioning of tooltip

one of [[object Object],[object Object],[object Object],[object Object]]

'top'

fieldset

Uses <fieldset> and <legend> instead of <label>. Useful for radio buttons and checkboxes. If this prop is not explicitly set, InputGroup will look for the `shouldUseFieldset` hint on the given input.

bool

null

className

Class on outer container element

string

null

Best Practices

See the <Input /> component for best practices around NerdWallet input fields.

<fieldset> for Radios and Checkboxes

InputGroup can render two different DOM structures. By default it renders the input inside a <label>, but rendering radios and checkboxes using <fieldset> and <legend> results in better accessibility. The fieldset prop can be used to control this explicitly, but by default InputGroup also looks for the shouldUseFieldset hint set by the given input's component. RadioGroup and CheckboxGroup (from @nerdwallet/react-radio and @nerdwallet/react-checkbox) set this.

Maintainers

This component is maintained by the FEI team.

See Also