Components
Input Group
Add addons, buttons, and helper content to inputs.
Usage
import {
InputGroup,
InputGroupAddon,
InputGroupButton,
InputGroupInput,
InputGroupText,
InputGroupTextarea,
} from "@tulip-systems/core/components/client";<InputGroup>
<InputGroupInput placeholder="Search..." />
<InputGroupAddon>
<SearchIcon />
</InputGroupAddon>
</InputGroup>Align
Use the align prop on InputGroupAddon to position the addon relative to the input. For proper
focus management, place InputGroupAddon after InputGroupInput or InputGroupTextarea in the
DOM and use align to visually position it.
inline-start
Icon positioned at the start.
inline-end
Icon positioned at the end.
block-start
Full Name
Header positioned above the input.
script.js
Header positioned above the textarea.
block-end
USD
Footer positioned below the input.
0/280
Footer positioned below the textarea.
Examples
Icon
Text
120 characters left
Button
Kbd
Dropdown
Spinner
Textarea
Line 1, Column 1
script.js
Custom Input
Add the data-slot="input-group-control" attribute to your custom input for automatic focus
state handling.