input

Input component for lustre_prefab.

Text input fields with various types and layouts.

Types

Input

opaque </>

Opaque Input type with builder pattern

pub opaque type Input(msg)

InputType

</>

The type of input to display

pub type InputType {
  Text
  Username
  CurrentPassword
  NewPassword
  Email
  Search
  SpellChecked
  Multiline
}

Constructors

```
Text
```
```
Username
```
```
CurrentPassword
```
```
NewPassword
```
```
Email
```
```
Search
```
```
SpellChecked
```
```
Multiline
```

Layout

</>

The layout of the input

pub type Layout {
  Vertical
  Horizontal
}

Constructors

```
Vertical
```
```
Horizontal
```

Values

new

</>

pub fn new(
  on_change on_change: fn(String) -> msg,
  value value: String,
  label label: String,
) -> Input(msg)

Create a new input

Example

input.new(
  on_change: fn(val) { UpdateName(val) },
  value: model.name,
  label: "Name",
)
|> input.with_placeholder("Enter your name")
|> input.view([])

view

</>

pub fn view(
  input_elem: Input(msg),
  extra_attrs: List(@internal Attribute(@internal Aligned, msg)),
) -> stylish.Element(msg)

View an input

Example

input.new(on_change: UpdateEmail, value: model.email, label: "Email")
|> input.with_input_type(input.Email)
|> input.with_placeholder("you@example.com")
|> input.with_help_text("We'll never share your email")
|> input.view([])

with_error

</>

pub fn with_error(
  input_elem: Input(msg),
  error: option.Option(String),
) -> Input(msg)

Modify the error state of an input

with_help_text

</>

pub fn with_help_text(
  input_elem: Input(msg),
  help_text: String,
) -> Input(msg)

Modify the help text of an input

with_input_type

</>

pub fn with_input_type(
  input_elem: Input(msg),
  input_type: InputType,
) -> Input(msg)

Modify the input type of an input

with_layout

</>

pub fn with_layout(
  input_elem: Input(msg),
  layout: Layout,
) -> Input(msg)

Modify the layout of an input

with_placeholder

</>

pub fn with_placeholder(
  input_elem: Input(msg),
  placeholder: String,
) -> Input(msg)

Modify the placeholder of an input