Input group
A field and its addons inside one bordered, focus-ringed row
⌘K
Files and people in this space.
https://
Usage
import {
InputGroup,
InputGroupAddon,
InputGroupInput,
InputGroupText,
} from "@gpuixui/components/input-group";
export const Search = () => (
<InputGroup label="Search" description="Files and people in this space.">
<InputGroupInput placeholder="Search…" />
<InputGroupAddon align="inline-start">
<InputGroupText>⌘</InputGroupText>
</InputGroupAddon>
<InputGroupAddon align="inline-end">
<InputGroupText>K</InputGroupText>
</InputGroupAddon>
</InputGroup>
);Composition
InputGroup
├── label / description / error (the group's own slots)
├── InputGroupAddon align="block-start"
├── InputGroupAddon align="inline-start"
├── InputGroupInput | InputGroupTextarea
├── InputGroupAddon align="inline-end"
├── InputGroupButton
├── InputGroupText
└── InputGroupAddon align="block-end"API
| Part | Prop | Type | Default |
|---|---|---|---|
InputGroup | label | string — the visible label and every group field's name | — |
InputGroup | description | string — supporting copy, hidden while an error shows | — |
InputGroup | error | string — paints the row invalid and takes the description slot | — |
InputGroup | invalid | boolean — invalid without a message | false |
InputGroup | className / style | string / StyleDesc | — |
InputGroup | testId / children | string / PartChildren | — |
InputGroupAddon | align | "inline-start" | "inline-end" | "block-start" | "block-end" | "inline-start" |
InputGroupAddon | className / style | string / StyleDesc | — |
InputGroupAddon | testId / children | string / ReactNode | — |
InputGroupButton | action props | variant ("ghost" by default), size, disabled, onClick — the shared Button contract | size="sm" |
InputGroupButton | busy props | loading, loadingLabel, reducedMotion, leading, trailing — the shared Button busy contract | — |
InputGroupText | className / style | string / StyleDesc | — |
InputGroupText | children | ReactNode | — |
InputGroupInput | field props | value, defaultValue, onValueChange, onChange, onSubmit, placeholder, readOnly, disabled, autoFocus, invalid, size, fullWidth, label, tabIndex, description, onClick, onKeyDown, onKeyUp, onFocus, onBlur, ref, aria-id, onLayout, className, style, testId — the primitives' input contract | — |
InputGroupTextarea | field props | the same as InputGroupInput without onSubmit, plus minRows and maxRows | — |
Edit this page on GitHubpackages/components/docs/input-group.mdx