Input field
v0.0.10
v0.0.10StableComponentStatelessApache-2.0
Installation
mix mishka.ui.gen.component input_field
Source
View Source
Input component
The input component is one function component for the standard HTML input types: text, email, password, number, url, tel, search, the date and time types, color, range, file, checkbox, select and textarea. Its API follows the input/1 component that mix phx.new generates in core_components.ex: a type, a label, a field or a name and value, errors, and options, prompt and multiple for a select. The dedicated field components are the better choice when you need colors, sizes or floating labels.
Input component
heex
<.input name="name" value="" type="text" label="Full Name" />
<.input name="add" value="" type="text" label="Address" />
<.input name="tel" value="" type="text" label="Phone" />
<.input name="zip" value="" type="text" label="Zipcode" />
<.input name="email" value="" label="Email" />
<.input
name="job"
type="select"
label="Choose your Job"
value="true"
options={[
{"foo", 1},
{"bar", 2}
]}
/>
<.input
name="start-houre"
value=""
type="datetime-local"
label="Start office hour"
/>
<.input
name="start-day"
value=""
type="datetime-local"
label="Start office day"
/>
<.input name="" value="" type="checkbox" label="Terms" />
<.input name="sal" value="" type="range" label="Salary" />Attributes
| Name | Type | Default | Values | Required | Description |
|---|---|---|---|---|---|
id
|
any
| — | — | No | A unique identifier is used to manage state and interaction |
name
|
any
| — | — | No | Name of input |
label
|
string
| — | — | No | — |
value
|
any
| — | — | No | Value of input |
type
|
string
|
text
|
checkboxcolordatedatetime-localemailfilemonthnumberpasswordrangesearchselectteltexttextareatimeurlweek
| No | — |
field
|
Phoenix.HTML.FormField
| — | — | No | a form field struct retrieved from the form |
errors
|
list
|
[]
| — | No | List of error messages to be displayed |
checked
|
boolean
| — | — | No | the checked flag for checkbox inputs |
prompt
|
string
| — | — | No | the prompt for select inputs |
options
|
list
|
[]
| — | No | the options to pass to Phoenix.HTML.Form.options_for_select/2 |
multiple
|
boolean
|
false
| — | No | the multiple flag for select inputs |
rest
|
global
| — | — | No | Global attributes can define defaults which are merged with attributes provided by the caller |
Options
Each option takes one or more of its values, separated by commas.
| Option | Values |
|---|---|
--module
| A module name of your own |
What it generates
Functions
inputerror
Helpers
None
Generated with it
icon
Command
mix mishka.ui.gen.component input_field