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 — Ark UI
input-addon.tsx
12345678910111213import { InputGroup } from "#components/ui/ark-ui/input-addon.tsx";
export function Example() { return ( // variant/size resolve once on Root; Addon and Input share them via // context, and addons join seamlessly on either side of the field <InputGroup.Root variant="outline" size="md"> <InputGroup.Addon>https://</InputGroup.Addon> <InputGroup.Input placeholder="yoursite.com" /> <InputGroup.Addon>.dev</InputGroup.Addon> </InputGroup.Root> );}