🎥 The magic of <Switch>
​ Happy Friday! We've been working hard on our Radix UI course and I wanted to share a slick hidden feature I discovered while building out this demo: The demo is built with Radix's <Switch> component. When you render a <Switch> by itself, here's the HTML you get: <Switch.Root> renders a button with all the proper ARIA Switch attributes, and <Switch.Thumb> includes the checked state via a data attribute. Neat! But look what happens if we wrap it in a <form>: <Switch> has automatically detected it's inside a <form>, and adds a hidden <input type="checkbox"> with the correct `name` and `value` attributes. What this means is that you can use your fancy custom <Switch> component inside a good ol' HTML form, and the correct name/value pair will be submitted as `FormData` along with any other inputs. ...making it a perfect fit if you're using HTML forms with Remix or Next.js Server Actions! This is the sort of magic I'm here for. Wanna know the secret? I peeked in the source and found this:
Turns out `closest(selector)` is a native DOM method that traverses up the tree looking for a match. Nifty!
I just love how simple forms are becoming in React these days. Go to town on Radix's headless <Switch> with Framer Motion animations or modern CSS techniques, then drop it in a <form> and let the browser handle the rest. ✨ We'll have more updates on the course soon, but in the meantime here's some of our Radix content to hold you over: |
Have a question about anything we're working on? Hit reply and let us know! Happy hacking, – Sam and Ryan |
Build UI
by Sam Selikoff
Subscribe to stay updated on all the latest content from Build UI.
Learn all about Search Params with React Server Components in our latest blog post, and check out our most recent podcast episode for our thoughts on React 19's upcoming features. Instant Search Params with React Server Components Read now → Out-of-order streaming in React Watch now → Asset loading in React Watch now → Podcast - Blog Post Club: React Labs – What We’ve Been Working On Watch now → Podcast - Instant URL search params in Next.js Watch now → Podcast - React Deep Dive:...
Dive into free videos on Radix, Remix, and Server Components, and catch our latest podcast episode where we talk through React's new cache function. Building an Elastic Slider with Framer Motion and Radix Watch now → Why you can't set cookies in Server Components Watch now → React's new cache function Watch now → Optimistic UI in Remix Watch now → Podcast - React Cache Deep Dive Watch now → Podcast - Advanced Radix UI and Blog Post Club React Server Watch now → And in case you missed it, last...
Hey there! I've got some exciting news to share today: Advanced Radix UI – my newest course – is now live! Clocking in at 2 hours and 13 minutes across 35 chapters, you’ll learn how to use Radix to build four completely custom UI components: a Switch, a Selector Group, a Toast, and a Slider: Each component has a completely custom design using Tailwind, and there's also some slick animation and interactions we build with React and Framer Motion to enhance what Radix gives you out of the box....