Beacon.LiveAdmin.StationUI.HTML.Input (Beacon LiveAdmin v0.4.0)

View Source

Summary

Functions

A checkbox input component.

Attributes

  • class (:string) - Defaults to "mt-0.5 first-of-type:mt-1.5 text-sm".

Slots

  • inner_block (required)

Attributes

  • class (:string) - Defaults to "text-lg p-2.5 placeholder:text-base focus:ring-2".
  • disabled (:boolean) - Defaults to false.
  • error_class (:string) - Defaults to "mt-0.5 first-of-type:mt-1.5 text-sm".
  • errors (:list) - Defaults to [].
  • id (:string) (required)
  • name (:string) (required)
  • value (:any) (required)
  • type (:string) (required) - Must be one of "color", "date", "datetime-local", "email", "file", "hidden", "month", "number", "password", "range", "search", "tel", "text", "time", "url", or "week".
  • Global attributes are accepted. Supports all globals plus: ["accept", "autocapitalize", "autocomplete", "autocorrect", "capture", "dirname", "disabled", "form", "list", "max", "maxlength", "min", "minlength", "multiple", "pattern", "placeholder", "readonly", "required", "size", "spellcheck", "step"].

Slots

  • caption - Accepts attributes:
    • class (:string) - mt-1.5 text-sm.
  • label - Accepts attributes:
    • class (:string) - mb-1.5 text-sm.
  • prefix
  • suffix

Attributes

  • class (:any) - Defaults to "mb-1.5 text-sm".
  • for (:string) - Defaults to nil.
  • id (:string) - Defaults to nil.

Slots

  • inner_block (required)

A radio input component.

A simple select input component using an HTML Select element.

A single select input component using a combobox text input and a listbox of select options.

A slider range input component.

A textarea input component.

A text input component.

Functions

checkbox(assigns)

A checkbox input component.

Suggested classes for various sizes:

  • XS
    • class="h-[22px] w-[22px]"
    • error_class="mt-0 first-of-type:mt-1 text-xs"
    • <:label class="gap-x-1.5 text-sm">
    • <:caption class="mt-1 text-xs">
  • SM
    • class="h-[26px] w-[26px]"
    • error_class="mt-0 first-of-type:mt-1 text-xs"
    • <:label class="gap-x-2 text-base">
    • <:caption class="mt-1 text-xs">
  • MD (default)
    • class="h-8 w-8"
    • error_class="mt-0.5 first-of-type:mt-1.5 text-sm"
    • <:label class="gap-x-2.5 text-lg">
    • <:caption class="mt-1.5 text-sm">
  • LG
    • class="h-10 w-10"
    • error_class="mt-0.5 first-of-type:mt-2 text-base"
    • <:label class="gap-x-3 text-xl">
    • <:caption class="mt-2 text-base">
  • XL
    • class="h-[46px] w-[46px] focus:!ring-4 focus-visible:!ring-offset-4 data-[errors=true]:!border-4"
    • error_class="mt-0.5 first-of-type:mt-2.5 text-lg"
    • <:label class="gap-x-3.5 text-2xl">
    • <:caption class="mt-2.5 text-lg">

Attributes

  • class (:string) - Defaults to "h-8 w-8".
  • checked (:boolean)
  • disabled (:boolean) - Defaults to false.
  • error_class (:string) - Defaults to "mt-0.5 first-of-type:mt-1.5 text-sm".
  • errors (:list) - Defaults to [].
  • id (:string) (required)
  • name (:string) (required)
  • value (:any)
  • Global attributes are accepted. Supports all globals plus: ["disabled", "form", "required"].

Slots

  • caption - Accepts attributes:
    • class (:string) - mt-1.5 text-sm.
  • label - Accepts attributes:
    • class (:string) - gap-x-2.5 text-lg.

error(assigns)

Attributes

  • class (:string) - Defaults to "mt-0.5 first-of-type:mt-1.5 text-sm".

Slots

  • inner_block (required)

generic_input(assigns)

Attributes

  • class (:string) - Defaults to "text-lg p-2.5 placeholder:text-base focus:ring-2".
  • disabled (:boolean) - Defaults to false.
  • error_class (:string) - Defaults to "mt-0.5 first-of-type:mt-1.5 text-sm".
  • errors (:list) - Defaults to [].
  • id (:string) (required)
  • name (:string) (required)
  • value (:any) (required)
  • type (:string) (required) - Must be one of "color", "date", "datetime-local", "email", "file", "hidden", "month", "number", "password", "range", "search", "tel", "text", "time", "url", or "week".
  • Global attributes are accepted. Supports all globals plus: ["accept", "autocapitalize", "autocomplete", "autocorrect", "capture", "dirname", "disabled", "form", "list", "max", "maxlength", "min", "minlength", "multiple", "pattern", "placeholder", "readonly", "required", "size", "spellcheck", "step"].

Slots

  • caption - Accepts attributes:
    • class (:string) - mt-1.5 text-sm.
  • label - Accepts attributes:
    • class (:string) - mb-1.5 text-sm.
  • prefix
  • suffix

label(assigns)

Attributes

  • class (:any) - Defaults to "mb-1.5 text-sm".
  • for (:string) - Defaults to nil.
  • id (:string) - Defaults to nil.

Slots

  • inner_block (required)

radio(assigns)

A radio input component.

Suggested classes for various sizes:

  • XS
    • class="h-[22px] w-[22px] p-[2px]"
    • error_class="mt-0 first-of-type:mt-1 text-xs"
    • <:label class="gap-x-1.5 text-sm">
    • <:caption class="mt-1 text-xs">
  • SM
    • class="h-[26px] w-[26px] p-[3px]"
    • error_class="mt-0 first-of-type:mt-1 text-xs"
    • <:label class="gap-x-2 text-base">
    • <:caption class="mt-1 text-xs">
  • MD (default)
    • class="h-8 w-8 p-[3px]"
    • error_class="mt-0.5 first-of-type:mt-1.5 text-sm"
    • <:label class="gap-x-2.5 text-lg">
    • <:caption class="mt-1.5 text-sm">
  • LG
    • class="h-10 w-10 p-1"
    • error_class="mt-0.5 first-of-type:mt-2 text-base"
    • <:label class="gap-x-3 text-xl">
    • <:caption class="mt-2 text-base">
  • XL
    • class="h-[46px] w-[46px] p-1 focus:!ring-4 focus-visible:!ring-offset-4 data-[errors=true]:!border-4"
    • error_class="mt-0.5 first-of-type:mt-2.5 text-lg"
    • <:label class="gap-x-3.5 text-2xl">
    • <:caption class="mt-2.5 text-lg">

Attributes

  • class (:string) - Defaults to "h-8 w-8 p-[3px]".
  • checked (:boolean)
  • disabled (:boolean) - Defaults to false.
  • error_class (:string) - Defaults to "mt-0.5 first-of-type:mt-1.5 text-sm".
  • errors (:list) - Defaults to [].
  • id (:string) (required)
  • name (:string) (required)
  • value (:any)
  • Global attributes are accepted. Supports all globals plus: ["disabled", "form", "required"].

Slots

  • caption - Accepts attributes:
    • class (:string) - mt-1.5 text-sm.
  • label - Accepts attributes:
    • class (:string) - gap-x-2.5 text-lg.

simple_select(assigns)

A simple select input component using an HTML Select element.

Suggested classes for various sizes:

  • XS
    • chevron_class="right-2 h-4 w-4"
    • class="text-sm p-2 pr-[30px] focus:ring-2"
    • error_class="mt-0 first-of-type:mt-1 text-xs"
    • <:caption class="mt-1 text-xs">
    • <:label class="mb-1 text-xs">
  • SM
    • chevron_class="right-2 h-4.5 w-4.5"
    • class="text-base p-2 pr-8 focus:ring-2"
    • error_class="mt-0 first-of-type:mt-1 text-xs"
    • <:caption class="mt-1 text-xs">
    • <:label class="mb-1 text-sm">
  • MD (default)
    • chevron_class="right-3 h-4.5 w-4.5"
    • class="text-lg p-2.5 pr-[34px] focus:ring-2"
    • error_class="mt-0.5 first-of-type:mt-1.5 text-sm"
    • <:caption class="mt-1.5 text-sm">
    • <:label class="mb-1.5 text-sm">
  • LG
    • chevron_class="right-3 h-6 w-6"
    • class="text-xl p-3 pr-11 focus:ring-2"
    • error_class="mt-0.5 first-of-type:mt-2 text-base"
    • <:caption class="mt-2 text-base">
    • <:label class="mb-2 text-base">
  • XL
    • chevron_class="right-3.5 h-7 w-7"
    • class="text-2xl px-3.5 py-3 pr-[52px] focus:ring-4 data-[errors=true]:!border-4"
    • error_class="mt-0.5 first-of-type:mt-2.5 text-lg"
    • <:caption class="mt-2.5 text-lg">
    • <:label class="mb-2.5 text-lg">

Attributes

  • chevron_class (:string) - Defaults to "right-3 h-4.5 w-4.5".
  • class (:string) - Defaults to "text-lg p-2.5 pr-[34px] focus:ring-2".
  • disabled (:boolean) - Defaults to false.
  • error_class (:string) - Defaults to "mt-0.5 first-of-type:mt-1.5 text-sm".
  • errors (:list) - Defaults to [].
  • id (:string) (required)
  • multiple (:boolean) - Defaults to false.
  • name (:string) (required)
  • options (:list) (required) - the options to pass to Phoenix.HTML.Form.options_for_select/2.
  • prompt (:string) - Defaults to nil.
  • value (:any) (required)
  • Global attributes are accepted. Supports all globals plus: ["autocomplete", "form", "required", "size"].

Slots

  • caption - Accepts attributes:
    • class (:string) - mt-1.5 text-sm.
  • label - Accepts attributes:
    • class (:string) - mb-1.5 text-sm.

single_select(assigns)

A single select input component using a combobox text input and a listbox of select options.

Suggested classes for various sizes:

  • XS
    • chevron_class="right-2 h-4 w-4"
    • class="text-sm p-2 pr-[30px] focus:ring-2"
    • error_class="mt-0 first-of-type:mt-1 text-xs"
    • option_list_class="text-xs"
    • <:caption class="mt-1 text-xs">
    • <:label class="mb-1 text-xs">
    • <:option class="px-3 py-2">
  • SM
    • chevron_class="right-2 h-4.5 w-4.5"
    • class="text-base p-2 pr-8 focus:ring-2"
    • error_class="mt-0.5 first-of-type:mt-1 text-xs"
    • option_list_class="text-base"
    • <:label class="mb-1 text-sm">
    • <:caption class="mt-1 text-xs">
    • <:option class="px-3 py-2">
  • MD (default)
    • chevron_class="right-3 h-4.5 w-4.5"
    • class="text-lg p-2.5 pr-[34px] focus:ring-2"
    • error_class="mt-0.5 first-of-type:mt-1.5 text-sm"
    • option_list_class="text-lg"
    • <:label class="mb-1.5 text-sm">
    • <:caption class="mt-1.5 text-sm">
    • <:option class="px-4 py-3.5">
  • LG
    • chevron_class="right-3 h-6 w-6"
    • class="text-xl p-3 pr-11 focus:ring-2"
    • error_class="mt-0.5 first-of-type:mt-2 text-base"
    • option_list_class="text-xl"
    • <:label class="mb-2 text-base">
    • <:caption class="mt-2 text-base">
    • <:option class="px-5 py-4">
  • XL
    • chevron_class="right-3.5 h-7 w-7"
    • class="text-2xl px-3.5 py-3 pr-[52px] focus:ring-4 data-[errors=true]:!border-4"
    • error_class="mt-0.5 first-of-type:mt-2.5 text-lg"
    • option_list_class="text-2xl"
    • <:label class="mb-2.5 text-lg">
    • <:caption class="mt-2.5 text-lg">
    • <:option class="px-8 py-5">

Attributes

  • chevron_class (:string) - Defaults to "right-3 h-4.5 w-4.5".
  • class (:string) - Defaults to "text-lg p-2.5 pr-[34px] focus:ring-2".
  • disabled (:boolean) - Defaults to false.
  • error_class (:string) - Defaults to "mt-0.5 first-of-type:mt-1.5 text-sm".
  • errors (:list) - Defaults to [].
  • id (:string) (required)
  • name (:string) (required)
  • option_list_class (:string) - Defaults to "text-lg".
  • option_list_id (:string) (required)
  • value (:any) (required)
  • wrapper_id (:string)
  • Global attributes are accepted. Supports all globals plus: ["autocapitalize", "autocomplete", "autocorrect", "dirname", "form", "list", "maxlength", "minlength", "pattern", "placeholder", "readonly", "required", "size", "spellcheck"].

Slots

  • caption - Accepts attributes:
    • class (:string) - mt-1.5 text-sm.
  • label - Accepts attributes:
    • class (:string) - mb-1.5 text-sm.
    • id (:string) (required)
  • option (required) - Accepts attributes:
    • class (:string) - px-4 py-3.5.
    • disabled (:boolean)
    • value (:string) (required)

slider(assigns)

A slider range input component.

Suggested classes for various sizes:

  • XS
    • class="[--slider-thumb-height:22px] [--slider-thumb-width:30px] [--slider-track-height:6px]"
    • error_class="mt-0 first-of-type:mt-1 text-xs"
    • <:label class="gap-x-1.5 text-sm">
    • <:caption class="mt-1 text-xs">
  • SM
    • class="[--slider-thumb-height:28px] [--slider-thumb-width:38px] [--slider-track-height:8px]"
    • error_class="mt-0 first-of-type:mt-1 text-xs"
    • <:label class="gap-x-2 text-base">
    • <:caption class="mt-1 text-xs">
  • MD (default)
    • class="[--slider-thumb-height:36px] [--slider-thumb-width:48px] [--slider-track-height:10px]"
    • error_class="mt-0.5 first-of-type:mt-1.5 text-sm"
    • <:label class="gap-x-2.5 text-lg">
    • <:caption class="mt-1.5 text-sm">
  • LG
    • class="[--slider-thumb-height:42px] [--slider-thumb-width:56px] [--slider-track-height:12px]"
    • error_class="mt-0.5 first-of-type:mt-2 text-base"
    • <:label class="gap-x-3 text-xl">
    • <:caption class="mt-2 text-base">
  • XL
    • class="[--slider-thumb-height:50px] [--slider-thumb-width:68px] [--slider-track-height:14px] [--slider-thumb-focus-ring-width:4px]"
    • error_class="mt-0.5 first-of-type:mt-2.5 text-lg"
    • <:label class="gap-x-3.5 text-2xl">
    • <:caption class="mt-2.5 text-lg">

Attributes

  • class (:string) - Defaults to "[--slider-thumb-height:36px] [--slider-thumb-width:48px] [--slider-track-height:10px]".
  • disabled (:boolean) - Defaults to false.
  • error_class (:string) - Defaults to "mt-0.5 first-of-type:mt-1.5 text-sm".
  • errors (:list) - Defaults to [].
  • id (:string) (required)
  • name (:string) (required)
  • value (:any)
  • Global attributes are accepted. Supports all globals plus: ["form", "disabled", "list", "max", "min", "orient", "step"].

Slots

  • caption - Accepts attributes:
    • class (:string) - mt-1.5 text-sm.
  • label - Accepts attributes:
    • class (:string) - gap-x-2.5 text-lg.

textarea(assigns)

A textarea input component.

Suggested classes for various sizes:

  • XS
    • class="text-sm p-2 placeholder:text-xs focus:ring-2"
    • error_class="mt-0 first-of-type:mt-1 text-xs"
    • <:label class="mb-1 text-xs">
    • <:caption class="mt-1 text-xs">
  • SM
    • class="text-base p-2 placeholder:text-sm focus:ring-2"
    • error_class="mt-0 first-of-type:mt-1 text-xs"
    • <:label class="mb-1 text-sm">
    • <:caption class="mt-1 text-xs">
  • MD (default)
    • class="text-lg p-2.5 placeholder:text-base focus:ring-2"
    • error_class="mt-0.5 first-of-type:mt-1.5 text-sm"
    • <:label class="mb-1.5 text-sm">
    • <:caption class="mt-1.5 text-sm">
  • LG
    • class="text-xl p-3 placeholder:text-lg focus:ring-2"
    • error_class="mt-0.5 first-of-type:mt-2 text-base"
    • <:label class="mb-2 text-base">
    • <:caption class="mt-2 text-base">
  • XL
    • class="text-2xl px-3.5 py-3 placeholder:text-2xl focus:ring-4 data-[errors=true]:!border-4"
    • error_class="mt-0.5 first-of-type:mt-2.5 text-lg"
    • <:label class="mb-2.5 text-lg">
    • <:caption class="mt-2.5 text-lg">

Attributes

  • class (:string) - Defaults to "text-lg p-2.5 placeholder:text-base focus:ring-2".
  • disabled (:boolean) - Defaults to false.
  • error_class (:string) - Defaults to "mt-0.5 first-of-type:mt-1.5 text-sm".
  • errors (:list) - Defaults to [].
  • id (:string) (required)
  • name (:string) (required)
  • value (:string) (required)
  • Global attributes are accepted. Supports all globals plus: ["autocapitalize", "autocomplete", "autocorrect", "cols", "dirname", "disabled", "form", "maxlength", "minlength", "placeholder", "readonly", "required", "rows", "spellcheck", "wrap"].

Slots

  • caption - Accepts attributes:
    • class (:string) - mt-1.5 text-sm.
  • label - Accepts attributes:
    • class (:string) - mb-1.5 text-sm.

textfield(assigns)

A text input component.

Suggested classes for various sizes:

  • XS
    • class="text-sm p-2 placeholder:text-xs focus:ring-2"
    • error_class="mt-0 first-of-type:mt-1 text-xs"
    • <:label class="mb-1 text-xs">
    • <:caption class="mt-1 text-xs">
  • SM
    • class="text-base p-2 placeholder:text-sm focus:ring-2"
    • error_class="mt-0 first-of-type:mt-1 text-xs"
    • <:label class="mb-1 text-sm">
    • <:caption class="mt-1 text-xs">
  • MD (default)
    • class="text-lg p-2.5 placeholder:text-base focus:ring-2"
    • error_class="mt-0.5 first-of-type:mt-1.5 text-sm"
    • <:label class="mb-1.5 text-sm">
    • <:caption class="mt-1.5 text-sm">
  • LG
    • class="text-xl p-3 placeholder:text-lg focus:ring-2"
    • error_class="mt-0.5 first-of-type:mt-2 text-base"
    • <:label class="mb-2 text-base">
    • <:caption class="mt-2 text-base">
  • XL
    • class="text-2xl px-3.5 py-3 placeholder:text-2xl focus:ring-4 data-[errors=true]:!border-4"
    • error_class="mt-0.5 first-of-type:mt-2.5 text-lg"
    • <:label class="mb-2.5 text-lg">
    • <:caption class="mt-2.5 text-lg">

Attributes

  • class (:string) - Defaults to "text-lg p-2.5 placeholder:text-base focus:ring-2".
  • disabled (:boolean) - Defaults to false.
  • error_class (:string) - Defaults to "mt-0.5 first-of-type:mt-1.5 text-sm".
  • errors (:list) - Defaults to [].
  • id (:string) (required)
  • name (:string) (required)
  • value (:string) (required)
  • Global attributes are accepted. Supports all globals plus: ["autocapitalize", "autocomplete", "autocorrect", "dirname", "disabled", "form", "list", "maxlength", "minlength", "pattern", "placeholder", "readonly", "required", "size", "spellcheck"].

Slots

  • caption - Accepts attributes:
    • class (:string) - mt-1.5 text-sm.
  • label - Accepts attributes:
    • class (:string) - mb-1.5 text-sm.
  • prefix
  • suffix