Tonic UI
Getting StartedColor ModeColor StyleVersionsContributing
THEME
BordersBreakpointsColorsOutlinesPositionsSpacingSizesShadowsTypography
BUILDING BLOCKS
BoxControlBox
UTILITIES

InputGroup

InputGroup is used to group related add-ons and inputs.

Import

Usage

Use InputGroup to place an InputGroupAddon or Button on either side of an Input. You may also place one on both sides of an Input.

EDITABLE EXAMPLE

Sizes

Use the size prop to change the size of the input group. You can set the value to sm, md, or lg.

EDITABLE EXAMPLE

Variants

The InputGroup component comes in 3 variants: outline, filled, and unstyled. Pass the variant prop and set it to either of these values.

outline

EDITABLE EXAMPLE

filled

EDITABLE EXAMPLE

unstyled

For an unstyled input group that doesn't have border and padding spaces, it is not necessary to place an InputGroupPrepend or InputGroupAppend on either side of an Input.

EDITABLE EXAMPLE

Multiple add-ons

Multiple add-ons are supported and can be mixed with checkbox and radio input components.

EDITABLE EXAMPLE

Multiple inputs

While multiple <Input />s are supported visually, validation styles are only available for input groups with a single <Input />.

EDITABLE EXAMPLE

Date inputs

EDITABLE EXAMPLE

Button add-ons

EDITABLE EXAMPLE

Props

InputGroup

NameTypeDefaultDescription
sizestring'md'The relative size to the input group itself. One of: 'sm', 'md', 'lg'
variantstring'outline'The variant of the input style to use. One of: 'outline', 'filled', 'unstyled'

InputGroupAddon

NameTypeDefaultDescription
sizestring'md'The relative size to the input group itself. One of: 'sm', 'md', 'lg'
variantstring'outline'The variant of the input style to use. One of: 'outline', 'filled', 'unstyled'

InputGroupAppend

InputGroupPrepend