@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

@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

@spec image(
  String.t(),
  keyword()
) :: t()

Creates a new image input.

The input value is a map, with the image binary and metadata:

%{
  data: binary(),
  height: pos_integer(),
  width: pos_integer(),
  format: :rgb | :png | :jpeg
}

Note that the value can also be nil, if no image is selected.

options

Options

• :format - the format to read the image as, either of:

  • :rgb (default) - the binary includes raw pixel values, each encoded as a single byte in the HWC order. Such binary can be directly converted to an Nx tensor, with no additional decoding

  • :png

  • :jpeg (or :jpg)

• :size - the size to fit the image into, given as {height, width}

• :fit - the strategy of fitting the image into :size, either of:

  • :contain (default) - resizes the image, such that it fits in a box of :size, but preserving the aspect ratio. The resulting image can be smaller or equal to :size

  • :match - resizes the image to :size, with no respect for aspect ratio

  • :pad - same as :contain, but pads the image to match :size exactly

  • :crop - resizes the image, such that one edge fits in :size and the other overflows, then center-crops the image to match :size exactly

@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

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

@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

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

@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"}])

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

Creates a new text input.

options

Options

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

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

Creates a new multiline text input.

options

Options

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

@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