lustre_stylish - v1.0.0

lustre/stylish/input

Form input elements for lustre_stylish

This module provides form input elements matching elm-ui’s Element.Input API.

All input elements have required labels for accessibility.

Types

ButtonConfig

</>

Configuration for a button

pub type ButtonConfig(msg) {
  ButtonConfig(
    on_press: option.Option(msg),
    label: stylish.Element(msg),
  )
}

Constructors

CheckboxConfig

</>

Configuration for a checkbox input

pub type CheckboxConfig(msg) {
  CheckboxConfig(
    on_change: fn(Bool) -> msg,
    icon: fn(Bool) -> stylish.Element(msg),
    checked: Bool,
    label: Label(msg),
  )
}

Constructors 

  • CheckboxConfig(
  on_change: fn(Bool) -> msg,
  icon: fn(Bool) -> stylish.Element(msg),
  checked: Bool,
  label: Label(msg),
)

Label

opaque </>

A label for an input. Labels are required for accessibility.

pub opaque type Label(msg)

MultilineConfig

</>

Configuration for a multiline text input

pub type MultilineConfig(msg) {
  MultilineConfig(
    on_change: fn(String) -> msg,
    text: String,
    placeholder: option.Option(Placeholder(msg)),
    label: Label(msg),
    spellcheck: Bool,
  )
}

Constructors 

  • MultilineConfig(
  on_change: fn(String) -> msg,
  text: String,
  placeholder: option.Option(Placeholder(msg)),
  label: Label(msg),
  spellcheck: Bool,
)

OptionState

</>

The state of a radio option

pub type OptionState {
  Idle
  Focused
  Selected
}

Constructors 

  • Idle
  • Focused
  • Selected

PasswordConfig

</>

Configuration for a password input

pub type PasswordConfig(msg) {
  PasswordConfig(
    on_change: fn(String) -> msg,
    text: String,
    placeholder: option.Option(Placeholder(msg)),
    label: Label(msg),
    show: Bool,
  )
}

Constructors

Placeholder

opaque </>

Placeholder text for an input

pub opaque type Placeholder(msg)

RadioConfig

</>

Configuration for a radio button group

pub type RadioConfig(msg, value) {
  RadioConfig(
    on_change: fn(value) -> msg,
    options: List(RadioOption(value, msg)),
    selected: option.Option(value),
    label: Label(msg),
  )
}

Constructors

RadioOption

opaque </>

A radio option

pub opaque type RadioOption(value, msg)

SliderConfig

</>

Configuration for a slider input

pub type SliderConfig(msg) {
  SliderConfig(
    on_change: fn(Float) -> msg,
    label: Label(msg),
    min: Float,
    max: Float,
    value: Float,
    thumb: Thumb(msg),
    step: option.Option(Float),
  )
}

Constructors 

  • SliderConfig(
  on_change: fn(Float) -> msg,
  label: Label(msg),
  min: Float,
  max: Float,
  value: Float,
  thumb: Thumb(msg),
  step: option.Option(Float),
)

TextConfig

</>

Configuration for a text input

pub type TextConfig(msg) {
  TextConfig(
    on_change: fn(String) -> msg,
    text: String,
    placeholder: option.Option(Placeholder(msg)),
    label: Label(msg),
  )
}

Constructors

Thumb

opaque </>

The draggable thumb of a slider

pub opaque type Thumb(msg)

Values

button

</> 
pub fn button(
  attributes: List(@internal Attribute(@internal Aligned, msg)),
  config: ButtonConfig(msg),
) -> stylish.Element(msg)

A button with optional onClick behavior.

The button will trigger on click. (TODO: Add Enter and Space key support)

checkbox

</> 
pub fn checkbox(
  attributes: List(@internal Attribute(@internal Aligned, msg)),
  config: CheckboxConfig(msg),
) -> stylish.Element(msg)

A checkbox input.

current_password

</> 
pub fn current_password(
  attributes: List(@internal Attribute(@internal Aligned, msg)),
  config: PasswordConfig(msg),
) -> stylish.Element(msg)

A current password input (helps browser autofill).

default_checkbox

</> 
pub fn default_checkbox(checked: Bool) -> stylish.Element(msg)

The default checkbox icon (blue with checkmark when checked)

default_thumb

</> 
pub fn default_thumb() -> Thumb(msg)

The default slider thumb (small circle)

email

</> 
pub fn email(
  attributes: List(@internal Attribute(@internal Aligned, msg)),
  config: TextConfig(msg),
) -> stylish.Element(msg)

An email input (helps browser autofill and validation).

focused_on_load

</> 
pub fn focused_on_load() -> @internal Attribute(
  @internal Aligned,
  msg,
)

Mark an input to be focused when the page loads

label_above

</> 
pub fn label_above(
  attributes: List(@internal Attribute(@internal Aligned, msg)),
  content: stylish.Element(msg),
) -> Label(msg)

Create a label positioned above the input

label_below

</> 
pub fn label_below(
  attributes: List(@internal Attribute(@internal Aligned, msg)),
  content: stylish.Element(msg),
) -> Label(msg)

Create a label positioned below the input

label_hidden

</> 
pub fn label_hidden(text: String) -> Label(msg)

Create a hidden label (for accessibility only).

label_left

</> 
pub fn label_left(
  attributes: List(@internal Attribute(@internal Aligned, msg)),
  content: stylish.Element(msg),
) -> Label(msg)

Create a label positioned to the left of the input

label_right

</> 
pub fn label_right(
  attributes: List(@internal Attribute(@internal Aligned, msg)),
  content: stylish.Element(msg),
) -> Label(msg)

Create a label positioned to the right of the input

multiline

</> 
pub fn multiline(
  attributes: List(@internal Attribute(@internal Aligned, msg)),
  config: MultilineConfig(msg),
) -> stylish.Element(msg)

A multiline text input (textarea).

new_password

</> 
pub fn new_password(
  attributes: List(@internal Attribute(@internal Aligned, msg)),
  config: PasswordConfig(msg),
) -> stylish.Element(msg)

A new password input (helps browser autofill).

option

</> 
pub fn option(
  value: value,
  label: stylish.Element(msg),
) -> RadioOption(value, msg)

Create a radio option with default styling

option_with

</> 
pub fn option_with(
  value: value,
  view: fn(OptionState) -> stylish.Element(msg),
) -> RadioOption(value, msg)

Create a radio option with custom state rendering

placeholder

</> 
pub fn placeholder(
  attributes: List(@internal Attribute(@internal Aligned, msg)),
  content: stylish.Element(msg),
) -> Placeholder(msg)

Create placeholder text for an input

radio

</> 
pub fn radio(
  attributes: List(@internal Attribute(@internal Aligned, msg)),
  config: RadioConfig(msg, value),
) -> stylish.Element(msg)

A radio button group (vertical layout).

radio_row

</> 
pub fn radio_row(
  attributes: List(@internal Attribute(@internal Aligned, msg)),
  config: RadioConfig(msg, value),
) -> stylish.Element(msg)

A radio button group (horizontal layout).

</> 
pub fn search(
  attributes: List(@internal Attribute(@internal Aligned, msg)),
  config: TextConfig(msg),
) -> stylish.Element(msg)

A search input (provides browser hints for search).

slider

</> 
pub fn slider(
  attributes: List(@internal Attribute(@internal Aligned, msg)),
  config: SliderConfig(msg),
) -> stylish.Element(msg)

A slider for selecting numeric values.

spell_checked

</> 
pub fn spell_checked(
  attributes: List(@internal Attribute(@internal Aligned, msg)),
  config: TextConfig(msg),
) -> stylish.Element(msg)

A text input with spell checking enabled.

text_input

</> 
pub fn text_input(
  attributes: List(@internal Attribute(@internal Aligned, msg)),
  config: TextConfig(msg),
) -> stylish.Element(msg)

A basic text input.

thumb

</> 
pub fn thumb(
  attributes: List(@internal Attribute(@internal Aligned, msg)),
) -> Thumb(msg)

Create a custom slider thumb

username

</> 
pub fn username(
  attributes: List(@internal Attribute(@internal Aligned, msg)),
  config: TextConfig(msg),
) -> stylish.Element(msg)

A username input (helps browser autofill).

✨ Search Document