Kino
Kino v0.7.0

View Source Kino.Input (Kino v0.7.0)

Various input elements for entering data.

examples

 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

 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) 
@opaque t()

Link to this section Functions

Link to this function

checkbox(label, opts \\ [])

View Source 
@spec checkbox(
  String.t(),
  keyword()
) :: t()

Creates a new checkbox.

The input value can be either true or false.

options

 Options

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

color(label, opts \\ [])

View Source 
@spec color(
  String.t(),
  keyword()
) :: t()

Creates a new color input.

The input value can be a hex color string.

options

 Options

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

number(label, opts \\ [])

View Source 
@spec number(
  String.t(),
  keyword()
) :: t()

Creates a new number input.

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

options

 Options

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

password(label, opts \\ [])

View Source 
@spec 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

 Options

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

range(label, opts \\ [])

View Source 
@spec range(
  String.t(),
  keyword()
) :: t()

Creates a new slider input.

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

options

 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 
@spec 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

 Examples 

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

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

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

View Source 
@spec 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

 Options

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

examples

 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 
@spec text(
  String.t(),
  keyword()
) :: t()

Creates a new text input.

options

 Options

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

textarea(label, opts \\ [])

View Source 
@spec textarea(
  String.t(),
  keyword()
) :: t()

Creates a new multiline text input.

options

 Options

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

url(label, opts \\ [])

View Source 
@spec url(
  String.t(),
  keyword()
) :: t()

Creates a new URL input.

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

options

 Options

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