Select

Select components are used for collecting user provided information from a list of options.

Installation

gleam run -m gleez add select

Variants

Outlined

outlined(Color): Where color is one of Colors

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

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

Underlined

underlined(Color): Where color is one of Colors

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

pub fn demo() -> Element(a) {
  div([class("flex flex-col flex-wrap gap-4 justify-center w-full")], [
    select([select.underlined(select.Neutral), select.md()], [option([], "Neutral")]),
    select([select.underlined(select.Primary), select.md()], [option([], "Primary")]),
    select([select.underlined(select.Secondary), select.md()], [option([], "Secondary")]),
    select([select.underlined(select.Success), select.md()], [option([], "Success")]),
    select([select.underlined(select.Info), select.md()], [option([], "Info")]),
    select([select.underlined(select.Warning), select.md()], [option([], "Warning")]),
    select([select.underlined(select.Danger), select.md()], [option([], "Danger")]),
  ])
}

Flat

flat(Color): Where color is one of Colors

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

pub fn demo() -> Element(a) {
  div([class("flex flex-col flex-wrap gap-4 justify-center w-full")], [
    select([select.flat(select.Neutral), select.md()], [option([], "Neutral")]),
    select([select.flat(select.Primary), select.md()], [option([], "Primary")]),
    select([select.flat(select.Secondary), select.md()], [option([], "Secondary")]),
    select([select.flat(select.Success), select.md()], [option([], "Success")]),
    select([select.flat(select.Info), select.md()], [option([], "Info")]),
    select([select.flat(select.Warning), select.md()], [option([], "Warning")]),
    select([select.flat(select.Danger), select.md()], [option([], "Danger")]),
  ])
}

Attributes

Size

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

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

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