Input Group
Combine an input with labels, icons, or adjacent actions.
Preview
Import
import { InputGroup, InputGroupInput, InputGroupTextarea, InputGroupAddon, InputGroupButton, InputGroupText } from "@sigil-ui/components";Usage
<InputGroup className="w-full max-w-sm">
<InputGroupAddon>$</InputGroupAddon>
<InputGroupInput placeholder="0.00" />
<InputGroupAddon>USD</InputGroupAddon>
</InputGroup>Sub-components
This component includes the following parts:
<InputGroupInput><InputGroupTextarea><InputGroupAddon><InputGroupButton><InputGroupText>
Token integration
| CSS Variable | Purpose |
|---|---|
--s-radius-input | Radius input |
--s-radius-md | Radius md |
--s-border | Border |
--s-border-style | Border style |
--s-background | Background |
--s-primary | Primary |
--s-duration-fast | Duration fast |
--s-text | Text |
--s-text-muted | Text muted |
--s-surface | Surface |
--s-surface-elevated | Surface elevated |