Docs/InputGroup

InputGroup

Combines input with prefix/suffix addons using border management.

Usage

tsx

1import { InputGroup, InputGroupAddon, Input } from '@storm-ds/ui'
2
3<InputGroup>
4  <InputGroupAddon>https://</InputGroupAddon>
5  <Input placeholder="example.com" />
6</InputGroup>

With Prefix

https://

tsx

1<InputGroup>
2  <InputGroupAddon>https://</InputGroupAddon>
3  <Input placeholder="example.com" />
4</InputGroup>

With Suffix

.00

tsx

1<InputGroup>
2  <Input placeholder="Amount" />
3  <InputGroupAddon>.00</InputGroupAddon>
4</InputGroup>

With Button

tsx

1<InputGroup>
2  <Input placeholder="Search..." />
3  <Button size="sm">Search</Button>
4</InputGroup>

Props

Prop	Type	Default	Description
className	string	-	Custom classes on the group wrapper

Use with AI

Create a Next.js component using Storm UI's InputGroup. Import: `import { InputGroup, InputGroupAddon, Input, Button } from '@storm-ds/ui'`. Flex container managing child border radius. InputGroupAddon provides styled prefix/suffix. Can also combine with Button for search/action patterns. Example: `<InputGroup><InputGroupAddon>https://</InputGroupAddon><Input placeholder="example.com" /></InputGroup>` or `<InputGroup><Input placeholder="Search..." /><Button size="sm">Search</Button></InputGroup>`

RadioGroup

Slider