Beacon.LiveAdmin.StationUI.HTML.Input (Beacon LiveAdmin v0.4.0)
View SourceSummary
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 tofalse
.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 tonil
.id
(:string
) - Defaults tonil
.
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
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 tofalse
.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.
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 tofalse
.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 tonil
.id
(:string
) - Defaults tonil
.
Slots
inner_block
(required)
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 tofalse
.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.
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 tofalse
.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 tofalse
.name
(:string
) (required)options
(:list
) (required) - the options to pass to Phoenix.HTML.Form.options_for_select/2.prompt
(:string
) - Defaults tonil
.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.
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 tofalse
.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)
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 tofalse
.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.
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 tofalse
.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.
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 tofalse
.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