ios segmented control css
All collections tagged with "ios segmented control css"
25 CSS Button Groups
25 hand-coded CSS button groups: segmented controls, split buttons, pill radios, toggle groups, filter chips, floating action buttons, pricing toggles, Web3 wallet-connect grids, AI model pickers, icon toolbars — with Popover API, offset-path, View Transitions, @property, :has(), and every modern CSS primitive. Zero dependencies vs Radix/shadcn/Aceternity, WCAG 2.2 AA accessible, MIT licensed.
24 CSS Radio Buttons
24 hand-coded CSS radio button designs covering every real-world use case tier-1 SaaS, e-commerce, fintech, and healthcare products reach for radio inputs in 2026: full selectable cards (:has()-driven with icon + title + meta + price), iOS-style pill segmented control (billing period toggle), radio row with icon tile + title + description subtext (settings-page pattern), dark-mode glowing radio with 3-layer box-shadow breathing pulse, pure-CSS accessible radio using appearance:none (WCAG 1.3.1 canonical reference — no wrapper), plan picker rows with 'Most popular' + 'Best value' gradient badges, concentric ripple animation on check, sliding pill toggle switch (2-seg thumb), interactive 3D sphere radio with orb highlight tracking, ink splash animation on select, rating star radio group (reverse-flex flip pattern), 3D tilt card option selector with cursor-tracked perspective, minimal checkmark radio, product color swatch selector (Shopify/Amazon variant picker), segmented control bar, cyberpunk neon ring radio, subscription pricing plan cards (Stripe/Vercel/Linear billing tier pattern), liquid wave fill on select, image clip-mask option selector (Airbnb/Booking destination picker), gradient border card radio, user profile avatar selector (Netflix who's-watching pattern), stacked vertical radio list, tactile 3D push button radio (skeuomorphic keycap depress), and outer glow pulse radio with dual sonar-ping keyframes. 22 truly Pure CSS + 2 with a tiny optional vanilla JS snippet (Demo 09 orb highlight tracking + Demo 12 3D tilt cursor perspective). Every radio group uses real <input type='radio'> inside <fieldset> + <legend> semantic wrappers so screen readers announce the question before the options, keyboard arrow keys move selection natively, and form-post semantics work zero-config. Every visual is scoped under a unique .crb-NN prefix so it drops into any project without CSS collisions, ships prefers-reduced-motion guards, and is framework-agnostic (works as-is in React, Vue, Svelte, Astro, Next.js, Remix, or plain HTML).
32 CSS Tab Designs
32 hand-coded CSS tab designs for SaaS dashboards, checkout flows, docs sites, and settings panels — sliding pill (Linear/Vercel), iOS segmented (Apple HIG), VS Code file tabs, brutalist press, bento grid, CRT terminal, particle burst, drop-cap editorial, and 24 more. Every demo uses semantic HTML (real button + radio inputs), full keyboard nav, and prefers-reduced-motion guards for WCAG 2.1 SC 2.1.1 / 2.3.3 / 2.4.7 compliance. Copy-paste HTML + CSS (+ JS on the 9 measured-indicator demos), no dependencies.