View Source LiveViewUI.UI.Input (LiveViewUI v0.0.7)
A simple input component for various form fields.
Example Usage
Here is a basic example of setting up a text input component:
<Input.root name="username" label="Username" />
You can customize the input with different types, labels, and other attributes:
Text Input
<Input.root type="text" name="username" label="Username" />
Email Input
<Input.root type="email" name="user_email" label="Email" value="user@example.com" />
Password Input
<Input.root type="password" name="password" label="Password" />
Number Input
<Input.root type="number" name="quantity" label="Quantity" />
Checkbox Input
<Input.root type="checkbox" name="agree" label="I Agree">
I agree to the terms and conditions
</Input.root>
Select Input
<Input.root type="select" name="country" label="Country" options={["USA", "Canada", "Mexico"]} prompt="Select a country" />
Textarea Input
<Input.root type="textarea" name="description" label="Description" />
Radio Input
<Input.root type="radio" name="gender" label="Male" value="male" />
<Input.root type="radio" name="gender" label="Female" value="female" />
Date Input
<Input.root type="date" name="birthday" label="Birthday" />
Time Input
<Input.root type="time" name="appointment_time" label="Appointment Time" />
URL Input
<Input.root type="url" name="website" label="Website" />
Attributes
:id
- The ID of the input element. Defaults to the field ID if not provided.:name
- The name of the input element.:label
- The label text for the input element.:value
- The value of the input element.:type
- The type of the input element. Default is"text"
. Available options include:"checkbox"
,"color"
,"date"
,"datetime-local"
,"email"
,"file"
,"hidden"
,"month"
,"number"
,"password"
,"radio"
,"range"
,"search"
,"select"
,"tel"
,"text"
,"textarea"
,"time"
,"url"
,"week"
:field
- A form field struct retrieved from the form (e.g.,@form[:email]
).:errors
- A list of errors for the input element.:checked
- The checked flag for checkbox inputs.:prompt
- The prompt for select inputs.:options
- The options to pass toPhoenix.HTML.Form.options_for_select/2
for select inputs.:multiple
- The multiple flag for select inputs. Default isfalse
.:class
- Additional CSS classes to apply to the input element.:rest
- Any additional attributes to apply to the input element, includingaccept
,autocomplete
,capture
,cols
,disabled
,form
,list
,max
,maxlength
,min
,minlength
,multiple
,pattern
,placeholder
,readonly
,required
,rows
,size
,step
.
Slots
:inner_block
- The content to be displayed inside the input element (e.g., label for checkbox).
Components
Input.root
- The main container for the input component.
Summary
Functions
Attributes
id
(:any
) - Defaults tonil
.name
(:any
)label
(:string
) - Defaults tonil
.value
(:any
)type
(:string
) - Defaults to"text"
.field
(Phoenix.HTML.FormField
) - a form field struct retrieved from the form, for example: @form[:email].errors
(:list
) - Defaults to[]
.checked
(:boolean
) - the checked flag for checkbox inputs.prompt
(:string
) - the prompt for select inputs. Defaults tonil
.options
(:list
) - the options to pass to Phoenix.HTML.Form.options_for_select/2.multiple
(:boolean
) - the multiple flag for select inputs. Defaults tofalse
.class
(:any
) - Defaults tonil
.- Global attributes are accepted. Supports all globals plus:
["accept", "autocomplete", "capture", "cols", "disabled", "form", "list", "max", "maxlength", "min", "minlength", "multiple", "pattern", "placeholder", "readonly", "required", "rows", "size", "step"]
.
Slots
inner_block
Functions
Attributes
id
(:any
) - Defaults tonil
.name
(:any
)label
(:string
) - Defaults tonil
.value
(:any
)type
(:string
) - Defaults to"text"
.field
(Phoenix.HTML.FormField
) - a form field struct retrieved from the form, for example: @form[:email].errors
(:list
) - Defaults to[]
.checked
(:boolean
) - the checked flag for checkbox inputs.prompt
(:string
) - the prompt for select inputs. Defaults tonil
.options
(:list
) - the options to pass to Phoenix.HTML.Form.options_for_select/2.multiple
(:boolean
) - the multiple flag for select inputs. Defaults tofalse
.class
(:any
) - Defaults tonil
.- Global attributes are accepted. Supports all globals plus:
["accept", "autocomplete", "capture", "cols", "disabled", "form", "list", "max", "maxlength", "min", "minlength", "multiple", "pattern", "placeholder", "readonly", "required", "rows", "size", "step"]
.
Slots
inner_block