All components
Input Addon
Prefix and suffix segments that share height and variant styling with an adjacent input.
https://
Variants
https://
outlinehttps://
subtlehttps://
flushedSizes
https://
xshttps://
smhttps://
mdhttps://
lghttps://
xlInstall
zsh — input-addon
1bunx stylexblocks add input-addonUsage — Base UI
input-addon.tsx
12345678910111213import { InputGroup } from "#components/ui/base-ui/input-addon.tsx";
export function Example() { return ( // variant/size resolve once on Root; parts inherit them via context and // expose data-variant / data-size, joining seamlessly on either side <InputGroup.Root variant="outline" size="md"> <InputGroup.Addon>https://</InputGroup.Addon> <InputGroup.Input placeholder="yoursite.com" /> <InputGroup.Addon>.dev</InputGroup.Addon> </InputGroup.Root> );}