π₯ 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
Subscribe to stay updated on all the latest content from Build UI.
Hey there!We've been experimenting with some new AI components, and we thought you'd have fun seeing what we've been up to! This week, we've got two new videos showing off some of the React techniques we're using to handle streaming text from large language modelsβplus a code recipe for animating that text to make it look buttery smooth. Animate streaming text with a one-line hook Watch now β Distinguishing between human and programmatic scrolling Watch now β Recipe: useAnimatedText View now...
Hey! It's been a while since we've sent an update, but it was great meeting so many of you during conference season this spring. We're excited to be gearing up for our next course! More on that below... but first, here's what we've been up to: How to build a Recursive React Component Watch now β React Unpacked: A Roadmap to React 19 Watch now β SPAs in React 19 Watch now β Throw is about control flow β not error handling Watch now β We're super excited to share that we've started work on our...
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:...