Radio

The Radio Group allows the user to select one option from a set.

Installation

gleam run -m gleez add radio

Variants

Solid

solid(Color): Where color is one of Colors

import components/ui/radio.{radio}
import lustre/attribute.{class, name}
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")], [
    radio([radio.solid(radio.Neutral), radio.md(), name("demo")], [text("Neutral")]),
    radio([radio.solid(radio.Primary), radio.md(), name("demo")], [text("Primary")]),
    radio([radio.solid(radio.Secondary), radio.md(), name("demo")], [text("Secondary")]),
    radio([radio.solid(radio.Success), radio.md(), name("demo")], [text("Success")]),
    radio([radio.solid(radio.Info), radio.md(), name("demo")], [text("Info")]),
    radio([radio.solid(radio.Warning), radio.md(), name("demo")], [text("Warning")]),
    radio([radio.solid(radio.Danger), radio.md(), name("demo")], [text("Danger")]),
  ])
}

Outlined

outlined(Color): Where color is one of Colors

import components/ui/radio.{radio}
import lustre/attribute.{class, name}
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")], [
    radio([radio.outlined(radio.Neutral), radio.md(), name("demo")], [text("Neutral")]),
    radio([radio.outlined(radio.Primary), radio.md(), name("demo")], [text("Primary")]),
    radio([radio.outlined(radio.Secondary), radio.md(), name("demo")], [text("Secondary")]),
    radio([radio.outlined(radio.Success), radio.md(), name("demo")], [text("Success")]),
    radio([radio.outlined(radio.Info), radio.md(), name("demo")], [text("Info")]),
    radio([radio.outlined(radio.Warning), radio.md(), name("demo")], [text("Warning")]),
    radio([radio.outlined(radio.Danger), radio.md(), name("demo")], [text("Danger")]),
  ])
}

Flat

flat(Color): Where color is one of Colors

import components/ui/radio.{radio}
import lustre/attribute.{class, name}
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")], [
    radio([radio.flat(radio.Neutral), radio.md(), name("demo")], [text("Neutral")]),
    radio([radio.flat(radio.Primary), radio.md(), name("demo")], [text("Primary")]),
    radio([radio.flat(radio.Secondary), radio.md(), name("demo")], [text("Secondary")]),
    radio([radio.flat(radio.Success), radio.md(), name("demo")], [text("Success")]),
    radio([radio.flat(radio.Info), radio.md(), name("demo")], [text("Info")]),
    radio([radio.flat(radio.Warning), radio.md(), name("demo")], [text("Warning")]),
    radio([radio.flat(radio.Danger), radio.md(), name("demo")], [text("Danger")]),
  ])
}

Ghost

ghost(Color): Where color is one of Colors

import components/ui/radio.{radio}
import lustre/attribute.{class, name}
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")], [
    radio([radio.ghost(radio.Neutral), radio.md(), name("demo")], [text("Neutral")]),
    radio([radio.ghost(radio.Primary), radio.md(), name("demo")], [text("Primary")]),
    radio([radio.ghost(radio.Secondary), radio.md(), name("demo")], [text("Secondary")]),
    radio([radio.ghost(radio.Success), radio.md(), name("demo")], [text("Success")]),
    radio([radio.ghost(radio.Info), radio.md(), name("demo")], [text("Info")]),
    radio([radio.ghost(radio.Warning), radio.md(), name("demo")], [text("Warning")]),
    radio([radio.ghost(radio.Danger), radio.md(), name("demo")], [text("Danger")]),
  ])
}

Attributes

Size

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

SmallMediumLarge

import components/ui/radio.{radio}
import lustre/attribute.{class, name}
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")], [
    radio([radio.ghost(radio.Neutral), radio.sm(), name("demo")], [
      text("Small"),
    ]),
    radio([radio.ghost(radio.Neutral), radio.md(), name("demo")], [
      text("Medium"),
    ]),
    radio([radio.ghost(radio.Neutral), radio.lg(), name("demo")], [
      text("Large"),
    ]),
  ])
}

Examples

Disabled

import components/ui/radio.{radio}
import lustre/attribute.{class, checked, 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")], [
    radio(
      [
        radio.ghost(radio.Neutral),
        radio.md(),
        checked(True),
        disabled(True),
      ],
      [text("Disabled")],
    ),
  ])
}