Kino
Kino

View Source Kino.Input (Kino v0.5.2)

Various input elements for entering data.

Examples

First, create an input and make sure it is rendered, either by placing it at the end of a code cell or by explicitly rendering it with Kino.render/1.

input = Kino.Input.text("Name")

Then read the value at any later point:

name = Kino.Input.read(input)

Async API

You can subscribe to input changes or use the Stream API for event feed. See the Kino.Control module for more details.

Link to this section Summary

Types

t()

Functions

checkbox(label, opts \\ [])

Creates a new checkbox.

color(label, opts \\ [])

Creates a new color input.

number(label, opts \\ [])

Creates a new number input.

password(label, opts \\ [])

Creates a new password input.

range(label, opts \\ [])

Creates a new slider input.

read(input)

Synchronously reads the current input value.

select(label, options, opts \\ [])

Creates a new select input.

text(label, opts \\ [])

Creates a new text input.

textarea(label, opts \\ [])

Creates a new multiline text input.

url(label, opts \\ [])

Creates a new URL input.

Link to this section Types

Link to this opaque

t()

View Source (opaque)

Specs

t()

Link to this section Functions

Link to this function

checkbox(label, opts \\ [])

View Source

Specs

checkbox(
  String.t(),
  keyword()
) :: t()

Creates a new checkbox.

The input value can be either true or false.

Options

  • :default - the initial input value. Defaults to false
Link to this function

color(label, opts \\ [])

View Source

Specs

color(
  String.t(),
  keyword()
) :: t()

Creates a new color input.

The input value can be a hex color string.

Options

  • :default - the initial input value. Defaults to #6583FF
Link to this function

number(label, opts \\ [])

View Source

Specs

number(
  String.t(),
  keyword()
) :: t()

Creates a new number input.

The input value is can be either a number or nil.

Options

  • :default - the initial input value. Defaults to nil
Link to this function

password(label, opts \\ [])

View Source

Specs

password(
  String.t(),
  keyword()
) :: t()

Creates a new password input.

This is similar to text input, except the content is not visible by default.

Options

  • :default - the initial input value. Defaults to ""
Link to this function

range(label, opts \\ [])

View Source

Specs

range(
  String.t(),
  keyword()
) :: t()

Creates a new slider input.

The input value can be either float in the configured range.

Options

  • :default - the initial input value. Defaults to the minimum value

  • :min - the minimum value

  • :max - the maximum value

  • :step - the slider increment

Link to this function

read(input)

View Source

Specs

read(t()) :: term()

Synchronously reads the current input value.

Note that to retrieve the value, the input must be rendered first, otherwise an error is raised.

Examples 

input = Kino.Input.text("Name")

Kino.Input.read(input)
Link to this function

select(label, options, opts \\ [])

View Source

Specs

select(
  String.t(),
  [{value :: term(), label :: String.t()}],
  keyword()
) :: t()

Creates a new select input.

The input expects a list of options in the form [{value, label}], where value is an arbitrary term and label is a descriptive string.

Options

  • :default - the initial input value. Defaults to the first value from the given list of options

Examples 

Kino.Input.select("Language", [en: "English", fr: "Français"])

Kino.Input.select("Language", [{1, "One"}, {2, "Two"}, {3, "Three"}])
Link to this function

text(label, opts \\ [])

View Source

Specs

text(
  String.t(),
  keyword()
) :: t()

Creates a new text input.

Options

  • :default - the initial input value. Defaults to ""
Link to this function

textarea(label, opts \\ [])

View Source

Specs

textarea(
  String.t(),
  keyword()
) :: t()

Creates a new multiline text input.

Options

  • :default - the initial input value. Defaults to ""
Link to this function

url(label, opts \\ [])

View Source

Specs

url(
  String.t(),
  keyword()
) :: t()

Creates a new URL input.

The input value can be either a valid URL string or nil.

Options

  • :default - the initial input value. Defaults to nil