formz_lustre - v2.0.0

formz_lustre/widget

The goal of a “widget” in formz is to produce an HTML input like <input>, <select>, or <textarea>. In a formz Definition a widget can be any Gleam type, and it’s up to the form generator being used to know the exact type you need.

In this generator, the widget is either a function that takes the details and state of a field, or a special value for a hidden field.

Types

Args

</> 
pub type Args {
  Args(
    id: String,
    labelled_by: LabelledBy,
    described_by: DescribedBy,
  )
}

Constructors 

  • Args(
  id: String,
  labelled_by: LabelledBy,
  described_by: DescribedBy,
)

    Arguments

    • id

      The id of the input element.

    • labelled_by

      Details of how the input is labelled. Some sort of label is required for accessibility.

    • described_by

      Details of how the input is described. This is optional, but can be useful for accessibility.

DescribedBy

</> 
pub type DescribedBy {
  DescribedByElementsWithIds(ids: List(String))
  DescribedByNone
}

Constructors 

  • DescribedByElementsWithIds(ids: List(String))

    The input is described by elements with the specified ids. This is useful for additional instructions or error messages.

  • DescribedByNone

LabelledBy

</> 
pub type LabelledBy {
  LabelledByLabelElement
  LabelledByConfigValue
  LabelledByElementsWithIds(ids: List(String))
}

Constructors 

  • LabelledByLabelElement

    The input is labelled by a <label> element with a for attribute pointing to this input’s id. This has the best accessibility support and should be preferred when possible.

  • LabelledByConfigValue

    The input should be labelled using the formz.Config’s label field.

  • LabelledByElementsWithIds(ids: List(String))

    The input is labelled by elements with the specified ids.

Widget

</> 
pub type Widget(msg) {
  Widget(
    fn(formz.Config, formz.InputState, Args) ->
      element.Element(msg),
  )
  Hidden
}

Constructors 

  • Widget(
  fn(formz.Config, formz.InputState, Args) ->
    element.Element(msg),
)
  • Hidden

Functions

checkbox_widget

</> 
pub fn checkbox_widget() -> Widget(a)

Create an <input type="checkbox">. The checkbox is checked if the value is “on” (the browser default).

hidden_widget

</> 
pub fn hidden_widget() -> Widget(a)

Create a <input type="hidden">. This is useful for if a field is just passing data around and you don’t want it to be visible to the user. Like say, the ID of a record being edited.

input_widget

</> 
pub fn input_widget(type_: String) -> Widget(a)

Generate any <input> like type="text", type="email" or type="url".

number_widget

</> 
pub fn number_widget(step_size: String) -> Widget(a)

Create a <input type="number">. Normally browsers only allow whole numbers, unless a decimal step size is provided. The step size here is a string that will be put straight into the step-size attribute. Doing non-whole numbers this way does mean that a user can only input numbers up to the precision of the step size. If you truly need any float, then a type="text" input might be a better choice.

password_widget

</> 
pub fn password_widget() -> Widget(a)

Create an <input type="password">. This will not output the value in the generated HTML for privacy/security concerns.

select_widget

</> 
pub fn select_widget(
  variants: List(#(String, String)),
) -> Widget(a)

Create a <select></select> with <option>s for each variant. The list of variants is a two-tuple, where the first item is the text to display and the second item is the value.

textarea_widget

</> 
pub fn textarea_widget() -> Widget(a)

Create a <textarea></textarea>.

✨ Search Document