NUI-Widgets documentation has moved to Storybook hosted on Github Pages.

InputGroup

There is a breaking change to this component in the next version of NUI Widgets.
  • The readOnly prop will behave differently in a future version of NUI Widgets. InputGroup Buttons and Addons will no longer appear in readOnly InputGroups.
import InputGroup from '@concur/nui-widgets/lib/InputGroup/InputGroup';

Input group components are used for standardizing the styling of FormControl components that are combined with buttons or add-ons (fixed regions with static text).

Examples

With Add-on

An add-on is static text that appears before or after the input element.

<InputGroup>
    <InputGroup.Addon>@</InputGroup.Addon>
    <FormControl />
</InputGroup>

<InputGroup>
    <FormControl />
    <InputGroup.Addon>.00</InputGroup.Addon>
</InputGroup>

With Button

Buttons can appear before or after the input element.

<InputGroup>
    <InputGroup.Button>
        <Button>Click Me</Button>
    </InputGroup.Button>
    <FormControl />
</InputGroup>

<InputGroup>
    <FormControl />
    <InputGroup.Button>
        <Button>Click Me</Button>
    </InputGroup.Button>
</InputGroup>

With Dropdown Button

Dropdown buttons can appear before or after the input element.

<InputGroup>
    <InputGroup.Button>
        <ButtonDropdown
            id='testId'
            pullRight
            title='More'>
            <MenuItem key='1'>Item 1</MenuItem>
            <MenuItem key='2'>Item 2</MenuItem>
        </ButtonDropdown>
    </InputGroup.Button>
    <FormControl />
</InputGroup>

<InputGroup>
    <FormControl />
    <InputGroup.Button>
        <ButtonDropdown
            id='testId'
            pullRight
            title='More'>
            <MenuItem key='1'>Item 1</MenuItem>
            <MenuItem key='2'>Item 2</MenuItem>
        </ButtonDropdown>
    </InputGroup.Button>
</InputGroup>

Disabled State

Set the disabled property to change the InputGroup’s state to disabled. All child components will have this property propagated to them.

<InputGroup disabled>
    <InputGroup.Addon>@</InputGroup.Addon>
    <FormControl />
</InputGroup>

<InputGroup disabled>
    <FormControl />
    <InputGroup.Button>
        <Button>Click Me</Button>
    </InputGroup.Button>
</InputGroup>

<InputGroup disabled>
    <FormControl />
    <InputGroup.Button>
        <ButtonDropdown
            id='testId'
            pullRight
            title='More'>
            <MenuItem key='1'>Item 1</MenuItem>
            <MenuItem key='2'>Item 2</MenuItem>
        </ButtonDropdown>
    </InputGroup.Button>
</InputGroup>

ReadOnly State

ReadOnly is not a supported state for the InputGroup component.

Usage

InputGroup

Properties

Property Type Default Description
children Node Required Collection of React components to be included in the InputGroup. These will typically be a FormControl component along with either an InputGroup.Addon or InputGroup.Button.
className String   Custom classes to add to the <span> tag.
disabled Boolean false Controls whether the component and its children are enabled or disabled.
size String 'lg' Size of the element. Options are 'lg', 'md', 'sm'.

InputGroup.Addon

Properties

Property Type Default Description
children Node   React component to be included in the InputGroup.Addon.
className String   Custom classes to add to the <span> tag.

Callbacks

Property Parameters Description
onClick event Callback function for onClick events.

InputGroup.Button

Properties

Property Type Default Description
children Node Required React component to be included in the InputGroup.Button. This will typically be either a Button or ButtonDropdown.
className String   Custom classes to add to the <span> tag.