Midwest Component Library v0.24.0

Previews

No matching results.

x
1
2
3
4
5
6
7
8
<div class="midwest-switch midwest-form-group ">
  <div class="midwest-form-group__top">
    <input type="hidden" id="" value="0" autocomplete="off" /><input type="checkbox" id="theme-12ca8" value="1" data-controller="midwest-theme-switch" data-action="change->midwest-theme-switch#toggle" class="switch" aria-checked="false" />
    <label class="midwest-label " for="theme-12ca8">
      Dark mode
    </label>
  </div>
</div>
1
<%= midwest_form_switch change_theme: true %>

Theme toggle

Passing change_theme: true turns the switch into a dark/light mode toggle. It adds the dark class to <html>, remembers the choice in localStorage, and falls back to the OS prefers-color-scheme setting.

No params configured.

No assets to display.
Add a .js or .css file alongside the component to see it here.

Accessibility

Figma embed for Switch/change_theme

Annotate a preview to embed its Figma design here:

@figma "https://figma.com/..."