Buy Now and unlock this series
$
49
.99
yours forever
$
49
.99
Become a Pro and unlock everything
$
24
.99
per month
$
24
.99
Creating a Toggle
The first component we will create for our series is a toggle switch. We will start simple and set it up with some basic styling.
Downloads
Become a pro to download code and videos
Building Svelte Components
22 videos
Released: June 30 2021
Course Instructor
Scott Tolinski
- Getting Started
null - Creating a Toggle
14m42s - A More Configurable Toggle
null - Accordion with Mounting and Unmounting
null - Accordion Without UnMounting with Actions Part 1
null - Animating Our Accordion With the Web Animations API
14m28s - Search Filter with Reactive Statements
13m52s - Search List Input
14m0s - Fancy Input
16m39s - Markdown Input
11m29s - Making A Portal
10m40s - Making A Modal
14m32s - Advanced Custom Stores With a Toast Message
14m55s - Flip and Transition Animations with Toast Messages
9m41s - Using Tweened As a Timeout
10m37s - Complex State Updates With Toast Messages
11m3s - Dismiss-able Toasts and Error Toasts
null - Click Outside Action
11m45s - Storybook with Svelte Kit
10m25s - Storybook With Updating Props
6m19s - Creating an NPM Package With Svelte Kit
5m23s - Where To Go From Here
2m15s
Comments
Joel
10 months ago [edited]
@Scott, what extension are you using for the autocomplete/predictive text. Also which terminal are you using?
Josh
12 months ago [edited]
In the real world using a checkbox for a toggle probably isn't ideal. But if you did, you definitely wouldn't want to make the initial check box input
display: none. That would erase the keyboard accessibility by removing the input from the DOM.Heydon Pickering has done some good writing on this topic: https://inclusive-components.design/toggle-button/
Want to join the conversation?
Become a Pro member today!