InputGroup InputGroup is used to group related add-ons and inputs.
Import copy import {
InputGroup ,
InputGroupAddon ,
InputGroupAppend ,
InputGroupPrepend ,
} from '@trendmicro/react-styled-ui' ;
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
copy < Stack direction = " column " spacing = " 4x " >
< InputGroup >
< InputGroupPrepend >
< InputGroupAddon variant = " filled " > @ </ InputGroupAddon >
</ InputGroupPrepend >
< Input placeholder = " Username " />
</ InputGroup >
< InputGroup >
< Input placeholder = " Recipient ' s username " />
< InputGroupAppend >
< InputGroupAddon variant = " filled " > @example . com </ InputGroupAddon >
</ InputGroupAppend >
</ InputGroup >
< InputGroup >
< InputGroupPrepend >
< InputGroupAddon variant = " filled " > $ </ InputGroupAddon >
</ InputGroupPrepend >
< Input placeholder = " Recipient ' s username " />
< InputGroupAppend >
< InputGroupAddon variant = " filled " > .00 </ InputGroupAddon >
</ InputGroupAppend >
</ InputGroup >
</ Stack >
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
copy < Stack direction = " column " spacing = " 4x " >
< InputGroup size = " sm " >
< InputGroupPrepend >
< InputGroupAddon variant = " filled " > sm </ InputGroupAddon >
</ InputGroupPrepend >
< Input placeholder = " Small size (24px) " />
</ InputGroup >
< InputGroup size = " md " >
< InputGroupPrepend >
< InputGroupAddon variant = " filled " > md </ InputGroupAddon >
</ InputGroupPrepend >
< Input placeholder = " Default size (32px) " />
</ InputGroup >
< InputGroup size = " lg " >
< InputGroupPrepend >
< InputGroupAddon variant = " filled " > lg </ InputGroupAddon >
</ InputGroupPrepend >
< Input placeholder = " Large size (40px) " />
</ InputGroup >
</ Stack >
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
copy < Stack direction = " column " spacing = " 4x " >
< InputGroup variant = " outline " >
< InputGroupPrepend >
< InputGroupAddon > @ </ InputGroupAddon >
</ InputGroupPrepend >
< Input placeholder = " Username " />
</ InputGroup >
< InputGroup variant = " outline " >
< InputGroupPrepend >
< InputGroupAddon > @ </ InputGroupAddon >
</ InputGroupPrepend >
< Input variant = " filled " placeholder = " Username " />
</ InputGroup >
</ Stack >
filled
EDITABLE EXAMPLE
copy < Stack direction = " column " spacing = " 4x " >
< InputGroup variant = " filled " >
< InputGroupPrepend >
< InputGroupAddon > @ </ InputGroupAddon >
</ InputGroupPrepend >
< Input variant = " outline " placeholder = " Username " />
</ InputGroup >
< InputGroup variant = " filled " >
< InputGroupPrepend >
< InputGroupAddon > @ </ InputGroupAddon >
</ InputGroupPrepend >
< Input placeholder = " Username " />
</ InputGroup >
</ Stack >
unstyledFor 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
copy < InputGroup variant = " unstyled " >
< InputGroupAddon pr = " 1x " > @ </ InputGroupAddon >
< Input placeholder = " Username " />
</ InputGroup >
Multiple add-ons Multiple add-ons are supported and can be mixed with checkbox and radio input components.
EDITABLE EXAMPLE
copy < Stack direction = " column " spacing = " 4x " >
< InputGroup >
< InputGroupPrepend >
< InputGroupAddon variant = " filled " > $ </ InputGroupAddon >
</ InputGroupPrepend >
< InputGroupPrepend >
< InputGroupAddon variant = " filled " > 0.00 </ InputGroupAddon >
</ InputGroupPrepend >
< Input />
</ InputGroup >
< InputGroup >
< Input />
< InputGroupAppend >
< InputGroupAddon variant = " filled " > $ </ InputGroupAddon >
</ InputGroupAppend >
< InputGroupAppend >
< InputGroupAddon variant = " filled " > 0.00 </ InputGroupAddon >
</ InputGroupAppend >
</ InputGroup >
</ Stack >
Multiple inputs While multiple <Input />s are supported visually, validation styles are only available for input groups with a single <Input />.
EDITABLE EXAMPLE
copy < InputGroup >
< InputGroupPrepend >
< InputGroupAddon variant = " filled " whiteSpace = " nowrap " > First and last name </ InputGroupAddon >
</ InputGroupPrepend >
< Input placeholder = " First name " defaultValue = " John " required />
< Input placeholder = " Last name " defaultValue = " Doe " required />
</ InputGroup >
Date inputs
EDITABLE EXAMPLE
copy < InputGroup variant = " unstyled " >
< Input
placeholder = " YYYY "
borderBottom = { 1 }
textAlign = " center "
width = " 12x "
/>
< Text px = " 2x " > – </ Text >
< Input
placeholder = " MM "
borderBottom = { 1 }
textAlign = " center "
width = " 8x "
/>
< Text px = " 2x " > – </ Text >
< Input
placeholder = " DD "
borderBottom = { 1 }
textAlign = " center "
width = " 8x "
/>
</ InputGroup >
Button add-ons
EDITABLE EXAMPLE
copy function Example ( ) {
const [ colorMode ] = useColorMode ( ) ;
const dividerColor = {
dark : 'gray:70' ,
light : 'gray:30' ,
} [ colorMode ] ;
return (
< Stack direction = " column " spacing = " 4x " >
< InputGroup >
< InputGroupPrepend >
< Button variant = " secondary " >
Action
</ Button >
</ InputGroupPrepend >
< Input />
</ InputGroup >
< InputGroup >
< Input />
< InputGroupAppend >
< Button variant = " secondary " >
Action
</ Button >
</ InputGroupAppend >
</ InputGroup >
< InputGroup >
< InputGroupPrepend >
< Button variant = " secondary " >
Host name
< Space width = " 1x " />
< Icon icon = " angle-down " />
</ Button >
</ InputGroupPrepend >
< Input />
< InputGroupAppend >
< Button >
Action
</ Button >
</ InputGroupAppend >
</ InputGroup >
< InputGroup >
< Input />
< ButtonGroup >
< Button borderRadius = { 0 } >
Action
</ Button >
< Divider orientation = " vertical " color = { dividerColor } />
< Button >
< Icon icon = " settings " />
</ Button >
</ ButtonGroup >
</ InputGroup >
</ Stack >
) ;
}
render ( < Example /> ) ;
Props InputGroup Name Type Default Description size string 'md' The relative size to the input group itself. One of: 'sm', 'md', 'lg' variant string 'outline' The variant of the input style to use. One of: 'outline', 'filled', 'unstyled'
InputGroupAddon Name Type Default Description size string 'md' The relative size to the input group itself. One of: 'sm', 'md', 'lg' variant string 'outline' The variant of the input style to use. One of: 'outline', 'filled', 'unstyled'
InputGroupAppend InputGroupPrepend 