Elemental.DataInput.Input (elemental v0.3.1)

An abstraction on top of HTML's input element.

This only concerns itself with being a building block core component and directly abstracts input HTML element. For more sophisticated usage you may want to look at Elemental.DataInput.Field which provides a more complete complex component for easier to use/build forms.

Usage

<.input />
<.input name="some-text" />
<.input type="checkbox" name="my-checkbox" />

Additionally shorthand functions are provided for checkbox and radio

<.radio />
<.checkbox />

Summary

Functions

Shorthand for <.input type="checkbox" />

A simple abstraction on top of basic HTML input.

Shorthand for <.input type="radio" />

Functions

checkbox(assigns)

Shorthand for <.input type="checkbox" />

Attributes

  • name (:string) - The name of the checkbox, if not given a random value is selected.
  • value (:string) - The value of the checkbox, sent to the form if select. Defaults to nil.
  • checked (:boolean) - The checked flag for the checkbox. Defaults to nil.
  • color (:string) - The checkbox's color.Must be one of "ghost", "neutral", "primary", "secondary", "accent", "info", "success", "warning", or "error".
  • size (:string) - The checkbox's size.Must be one of "xs", "sm", "md", "lg", or "xl".
  • class (:any) - Additional CSS classes to pass to the checkbox. Defaults to nil.
  • Global attributes are accepted. Pass arbitrary attributes over to the checkbox.

input(assigns)

A simple abstraction on top of basic HTML input.

This is a super simplistic input component intended to be used as a building block for other Elemental components to use.

For complex use-cases with forms and other variants of inputs you may want to visit Elemental.DataInput.Field.field/1 component which provides additional features tailored for forms.

Types of button, reset, and submit are omitted from supported types, for button usages use Elemental.Actions.Button.button/1 instead.

For live file uploads, see Phoenix.Component.live_file_input/1 instead of the file type.

Attributes

  • type (:string) - > The input component's type.

    While we support button, reset, and submit types, those are more for completeness and are not recommended for use per MDN recommendations, prefer the use Elemental.Actions.Button instead.

    Defaults to "text".

  • name (:string) - The name of the input, if not given a random value is selected.

  • value (:string) - The value of the input.

    Value per type

    • checkbox - the data to submit if checked, arbitrary string.

    • color - always a string which contains a 7-character string specifying an RGB color in hexadecimal format. While you can input the color in either upper- or lower-case, it will be stored in lower-case form. The value is never in any other form, and is never empty.

    • email - the email string;

      1. An empty string ("") indicating that the user did not enter a value or that the value was removed.
      2. A single properly-formed email address. This doesn't necessarily mean the email address exists, but it is at least formatted correctly. This means username@domain or username@domain.tld.
      3. If multiple is enabled the value can be a list of properly-formed comma-separated email addresses. Any trailing and leading whitespace is removed from each address in the list.
    • date - a possible date string in the format yyyy-mm-dd.

    • datetime-local - a valid datetime string that follows the format YYYY-MM-DDTHH:mm.

    • month - a valid string in yyyy-MM format.

    • number - a valid number.

    • range - a valid number.

    • time - a valid time in HH:mm format.

    • week - a valid week in YYYY-W<week-number> format.

    Defaults to nil.

  • color (:string) - The input's color.Must be one of "ghost", "neutral", "primary", "secondary", "accent", "info", "success", "warning", or "error".

  • size (:string) - The input's size class to use.Must be one of "xs", "sm", "md", "lg", or "xl".

  • class (:any) - Additional CSS classes to pass to the input. Defaults to nil.

  • checked (:boolean) - The checked flag for checkboxes and radios. Defaults to nil.

  • list (:string) - The values of the list attribute is the id of a <datalist> element located in the same document.

    Defaults to nil.

  • max (:string) - The maximum value allowed for types that support it.

    If both the max and min attributes are set, this value must greater than or equal to the min attribute.

    Value per type

    • date - a possible date string in the format yyyy-mm-dd.
    • datetime-local - a valid datetime string that follows the format YYYY-MM-DDTHH:mm.
    • month - a valid string in yyyy-MM format.
    • number - a valid number.
    • range - a valid number.
    • time - a valid time in HH:mm format.
    • week - a valid week in YYYY-W<week-number> format.

    Invalid values imply no max value.

    Defaults to nil.

  • maxlength (:string) - The maximum string length (measured in UTF-16 code units) that the user can enter into the input. This must be an integer value of 0 or higher. If no maxlength is specified, or an invalid value is specified, the input has no maximum length. This value must also be greater than or equal to the value of minlength.

    Defaults to nil.

  • min (:string) - The maximum value allowed for types that support it.

    If both the max and min attributes are set, this value must less than or equal to the min attribute.

    Value per type

    • date - a possible date string in the format yyyy-mm-dd.
    • datetime-local - a valid datetime string that follows the format YYYY-MM-DDTHH:mm.
    • month - a valid string in yyyy-MM format.
    • number - a valid number.
    • range - a valid number.
    • time - a valid time in HH:mm format.
    • week - a valid week in YYYY-W<week-number> format.

    Invalid values imply no min value.

    Defaults to nil.

  • minlength (:string) - The minimum string length (measured in UTF-16 code units) that the user can enter into the input. This must be a non-negative integer value smaller than or equal to the value specified by maxlength. If no minlength is specified, or an invalid value is specified, the input has no minimum length.

    Defaults to nil.

  • multiple (:boolean) - A Boolean attribute which, if present, indicates that the user can enter a list of multiple values, separated by commas and, optionally, whitespace characters.

    Defaults to nil.

  • pattern (:string) - A regular expression that the input's value must match for the value to pass constraint validation. It must be a valid JavaScript regular expression.

    Defaults to nil.

  • placeholder (:string) - A string that provides a brief hint to the user as to what kind of information is expected in the field.

    The text must not include carriage returns or line feeds.

    Defaults to nil.

  • readonly (:boolean) - If present, means this field cannot be edited by the user. Defaults to nil.

  • step (:string) - The step value which specifies the number for the granularity of the step or the special value any, allowed for types that support it.

    Values per type

    • date - given in days; and is treated as a number of milliseconds equal to 86,400,000 times the step value (the underlying numeric value is in milliseconds). The default value of step is 1, indicating 1 day.
    • datetime-local - given in seconds, with a scaling factor of 1000 (since the underlying numeric value is in milliseconds). The default value of step is 60, indicating 60 seconds (or 1 minute, or 60,000 milliseconds).
    • month - given in months, with a scaling factor of 1 (since the underlying numeric value is also in months). The default value of step is 1 month.
    • number - a valid number; the default stepping value for number inputs is 1, allowing only integers to be entered—unless the stepping base is not an integer.
    • range - a valid number; the default stepping value for number inputs is 1, allowing only integers to be entered—unless the stepping base is not an integer.
    • time - given in seconds, with a scaling factor of 1000 (since the underlying numeric value is in milliseconds). The default value of step is 60, indicating 60 seconds (or 1 minute, or 60,000 milliseconds).
    • week - given in weeks, with a scaling factor of 604,800,000 (since the underlying numeric value is in milliseconds). The default value of step is 1, indicating 1 week.

    Note: When the data entered by the user doesn't adhere to the stepping configuration, the user agent may round to the nearest valid value, preferring numbers in the positive direction when there are two equally close options.

    any value

    • A string value of any means that no stepping is implied, and any value is allowed (barring other constraints, such as min and max).
    • Specifying any as the value for step has the same effect as 1 for date inputs.

    Defaults to nil.

  • Global attributes are accepted. Pass arbitrary attributes over to the input.

radio(assigns)

Shorthand for <.input type="radio" />

Attributes

  • name (:string) - The name of the radio, if not given a random value is selected.
  • value (:string) - The value of the radio, sent to the form if select. Defaults to nil.
  • checked (:boolean) - The checked flag for the radio. Defaults to nil.
  • color (:string) - The radio's color.Must be one of "ghost", "neutral", "primary", "secondary", "accent", "info", "success", "warning", or "error".
  • size (:string) - The radio's size.Must be one of "xs", "sm", "md", "lg", or "xl".
  • class (:any) - Additional CSS classes to pass to the radio. Defaults to nil.
  • Global attributes are accepted. Pass arbitrary attributes over to the radio.