Components
InputGroup
Compose input with prefix/suffix addons and icon decorations.
InputGroup
A wrapper component for composing inputs with prefix/suffix text, icons, or button addons.
Import
import { InputGroup, InputGroupAddon, InputGroupInput } from '@mks2508/mks-ui/react';Basic Usage
Basic Usage
.tsx
<InputGroup>
<InputGroupAddon>https://</InputGroupAddon>
<InputGroupInput placeholder="example.com" />
</InputGroup>With Suffix
With Suffix
.tsx
<InputGroup>
<InputGroupInput placeholder="Enter amount..." />
<InputGroupAddon>.com</InputGroupAddon>
</InputGroup>With Both
With Prefix and Suffix
.tsx
<InputGroup>
<InputGroupAddon>$</InputGroupAddon>
<InputGroupInput type="number" placeholder="0.00" />
<InputGroupAddon>USD</InputGroupAddon>
</InputGroup>API Reference
| Component | Props | Description |
|---|---|---|
InputGroup | className, children | Root container |
InputGroupInput | Input props | Styled input element |
InputGroupAddon | className, children | Prefix/suffix addon |