shadcn.io is an independent project built on shadcn/ui
A read-only repository link, with two buttons at the end. One is info. The other is favorite: its heart fills when it is on, and the button is marked pressed. Pressing it only toggles that heart.
Use it when a locked value still has a couple of actions. If favorite is the whole control, a Toggle is the simpler button. In Solid, Ark UI does not save the favorite.
Installation
Anatomy
Usage
<InputGroup class="w-full max-w-sm bg-background">
<InputGroupInput aria-label="Repository" placeholder="https://github.com/shadcn" readOnly type="url" />
<InputGroupAddon align="inline-end">
<InputGroupButton aria-label="Info" size="icon-xs" variant="ghost">
<InfoIcon aria-hidden="true" />
</InputGroupButton>
</InputGroupAddon>
<InputGroupAddon align="inline-end">
<InputGroupButton aria-label="Favorite" aria-pressed={favorited()} onClick={handleFavoriteToggle} size="icon-xs" variant="ghost">
<HeartIcon aria-hidden="true" class={favorited() ? "fill-current" : undefined} />
</InputGroupButton>
</InputGroupAddon>
</InputGroup>FAQ
Why are the two buttons in separate addons?
Each InputGroupAddon with align="inline-end" is placed after the input, in source order, so two addons line up at the end. One addon holding both buttons works too.
How does the heart fill?
A favorited flag toggles on each press, and the icon gets fill-current while it's on, so the heart fills with the text color.
How do screen readers know the favorite is on?
The button sets aria-pressed from the same flag, so it's announced as a toggle button, pressed or not pressed. Its name stays Favorite.
What does the info button do?
Nothing in the demo. Open a Tooltip or a Popover from it, as in API Key Info.
API Reference
Input Group
Sets aria-label="Repository", placeholder="https://github.com/shadcn", readOnly, type="url", align="inline-end" and aria-label="Info". The rest is on the Input Group page.
