Social Selector
betaPick a social platform from a row of icons — a pill slides behind the choice and the caption links to the profile.
- Forms
- 1 file
- 2 npm packages
- Accessibility notes
Loading the example…
pnpm dlx @dowel-ui/cli add social-selectornpm packages installed: class-variance-authority, radix-ui.
import { SocialSelector } from "@/components/ui/social-selector";Default
Gallery
Sizes
Generic Icons
Right To Left
<SocialSelector>
| Prop | Type | Default |
|---|---|---|
platforms (required) | SocialPlatform[] | — |
captionPrefixText before the domain. | ReactNode | "Updates on" |
defaultValueInitial selection when uncontrolled. Defaults to the first platform. | string | — |
dir | "ltr" | "rtl" | — |
disabled | boolean | — |
handleThe handle shown under the domain, without the "@". | string | — |
labelAccessible name for the radio group. | string | "Platform" |
nameSubmits the value with a form under this name. | string | — |
onValueChange | (value: string) => void | — |
openInNewTabOpen profile links in a new tab. | boolean | true |
showCaptionShow the domain and handle line under the icons. | boolean | true |
size | "sm" | "md" | "lg" | "md" |
valueControlled selected platform value. | string | — |
Plus every attribute of <div> except defaultValue, onChange, dir, children.
A Radix radio group named by `label`: one tab stop, arrow keys move and select (following the reading direction), and the value submits with a form under `name`. Each icon-only radio is named by the platform's `name`; icons and the sliding pill are aria-hidden. Caption links say when they open in a new tab. The pill's slide and the caption's blur-in stop under reduced motion.
8/8
checks passed
- Tested — passes
- axe assertion — passes
- Keyboard tested — does not apply
- Storybook examples — passes
- Accessibility documented — passes
- Semantic tokens only — passes
- Motion from tokens — passes
- className merged — passes
- Visible focus — does not apply
- No fixed widths — passes