Switch

Switches toggle the state of a single setting on or off.

Installation

gleam run -m gleez add switch

Variants

Solid

solid(Color): Where color is one of Colors

import components/ui/switch.{switch}
import lustre/attribute.{checked, class}
import lustre/element.{type Element}
import lustre/element/html.{div}

pub fn demo() -> Element(a) {
  div([class("flex flex-wrap gap-4 items-center justify-center w-full")], [
    switch([switch.solid(switch.Neutral), switch.md(), checked(True)], []),
    switch([switch.solid(switch.Primary), switch.md(), checked(True)], []),
    switch([switch.solid(switch.Secondary), switch.md(), checked(True)], []),
    switch([switch.solid(switch.Success), switch.md(), checked(True)], []),
    switch([switch.solid(switch.Info), switch.md(), checked(True)], []),
    switch([switch.solid(switch.Warning), switch.md(), checked(True)], []),
    switch([switch.solid(switch.Danger), switch.md(), checked(True)], []),
  ])
}

Outlined

outlined(Color): Where color is one of Colors

import components/ui/switch.{switch}
import lustre/attribute.{checked, class}
import lustre/element.{type Element}
import lustre/element/html.{div}

pub fn demo() -> Element(a) {
  div([class("flex flex-wrap gap-4 items-center justify-center w-full")], [
    switch([switch.outlined(switch.Neutral), switch.md(), checked(True)], []),
    switch([switch.outlined(switch.Primary), switch.md(), checked(True)], []),
    switch([switch.outlined(switch.Secondary), switch.md(), checked(True)], []),
    switch([switch.outlined(switch.Success), switch.md(), checked(True)], []),
    switch([switch.outlined(switch.Info), switch.md(), checked(True)], []),
    switch([switch.outlined(switch.Warning), switch.md(), checked(True)], []),
    switch([switch.outlined(switch.Danger), switch.md(), checked(True)], []),
  ])
}

Ghost

ghost(Color): Where color is one of Colors

import components/ui/switch.{switch}
import lustre/attribute.{checked, class}
import lustre/element.{type Element}
import lustre/element/html.{div}

pub fn demo() -> Element(a) {
  div([class("flex flex-wrap gap-4 items-center justify-center w-full")], [
    switch([switch.ghost(switch.Neutral), switch.md(), checked(True)], []),
    switch([switch.ghost(switch.Primary), switch.md(), checked(True)], []),
    switch([switch.ghost(switch.Secondary), switch.md(), checked(True)], []),
    switch([switch.ghost(switch.Success), switch.md(), checked(True)], []),
    switch([switch.ghost(switch.Info), switch.md(), checked(True)], []),
    switch([switch.ghost(switch.Warning), switch.md(), checked(True)], []),
    switch([switch.ghost(switch.Danger), switch.md(), checked(True)], []),
  ])
}

Attributes

Size

sm(): Small Size
md(): Medium Size
lg(): Large Size

Small

Medium

Large

import components/ui/switch.{switch}
import lustre/attribute.{class}
import lustre/element.{type Element, text}
import lustre/element/html.{div}

pub fn demo() -> Element(a) {
  div([class("flex flex-wrap gap-4 items-center justify-center w-full")], [
    switch([switch.solid(switch.Neutral), switch.sm()], [text("Small")]),
    switch([switch.solid(switch.Neutral), switch.md()], [text("Medium")]),
    switch([switch.solid(switch.Neutral), switch.lg()], [text("Large")]),
  ])
}

Examples

Disabled

import components/ui/switch.{switch}
import lustre/attribute.{class, disabled}
import lustre/element.{type Element, text}
import lustre/element/html.{div}

pub fn demo() -> Element(a) {
  div([class("flex flex-wrap gap-4 items-center justify-center w-full")], [
    switch([switch.solid(switch.Neutral), switch.sm(), disabled(True)], [
      text("Disabled"),
    ]),
    switch([switch.outlined(switch.Neutral), switch.sm(), disabled(True)], [
      text("Disabled"),
    ]),
  ])
}