Elemental.DataInput.Input (elemental v0.3.0)
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
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 tonil
.checked
(:boolean
) - The checked flag for the checkbox. Defaults tonil
.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 tonil
.- Global attributes are accepted. Pass arbitrary attributes over to the checkbox.
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.
Type related notes
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
, andsubmit
types, those are more for completeness and are not recommended for use per MDN recommendations, prefer the useElemental.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;- An empty string ("") indicating that the user did not enter a value or that the value was removed.
- 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
orusername@domain.tld
. - 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 formatyyyy-mm-dd
.datetime-local
- a valid datetime string that follows the formatYYYY-MM-DDTHH:mm
.month
- a valid string inyyyy-MM
format.number
- a valid number.range
- a valid number.time
- a valid time inHH:mm
format.week
- a valid week inYYYY-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 tonil
.checked
(:boolean
) - The checked flag for checkboxes and radios. Defaults tonil
.list
(:string
) - The values of the list attribute is theid
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
andmin
attributes are set, this value must greater than or equal to themin
attribute.Value per type
date
- a possible date string in the formatyyyy-mm-dd
.datetime-local
- a valid datetime string that follows the formatYYYY-MM-DDTHH:mm
.month
- a valid string inyyyy-MM
format.number
- a valid number.range
- a valid number.time
- a valid time inHH:mm
format.week
- a valid week inYYYY-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 nomaxlength
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 ofminlength
.Defaults to
nil
.min
(:string
) - The maximum value allowed for types that support it.If both the
max
andmin
attributes are set, this value must less than or equal to themin
attribute.Value per type
date
- a possible date string in the formatyyyy-mm-dd
.datetime-local
- a valid datetime string that follows the formatYYYY-MM-DDTHH:mm
.month
- a valid string inyyyy-MM
format.number
- a valid number.range
- a valid number.time
- a valid time inHH:mm
format.week
- a valid week inYYYY-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 bymaxlength
. If nominlength
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 tonil
.step
(:string
) - The step value which specifies the number for the granularity of the step or the special valueany
, 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 thestep
value (the underlying numeric value is in milliseconds). The default value ofstep
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 ofstep
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
andmax
). - Specifying
any
as the value forstep
has the same effect as 1 fordate
inputs.
Defaults to
nil
.Global attributes are accepted. Pass arbitrary attributes over to the input.
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 tonil
.checked
(:boolean
) - The checked flag for the radio. Defaults tonil
.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 tonil
.- Global attributes are accepted. Pass arbitrary attributes over to the radio.