Input

In progress
RTL

Text input fields allow users to enter text and can be used to collect user feedback or enter information in data entry forms.

These types of input fields are used on their own, or in combination with other inputs such as number entry, date picker, etc.

Input

Default

States

Sizes

Types

With label

With horizontal label

With hint

Hint for sm

Hint for md

Hint for lg

Hint with icon
Form props
Name Type Required Default Description
id string No - Id attribute for DOM element
testid string No - Data-testid attribute for DOM element
for any No - Atom or changeset to inform the form data
as atom No - The server side parameter in which all parameters will be gathered.
change event No - Triggered when the form is changed
submit event No - Triggered when the form is submitted
class string No - Additional Tailwind classes
autocomplete on | off No "on" Whether autocomplete is enabled
target any No - Target
trigger_action any No - Trigger a standard form submit on DOM patch to the URL specified in the form's standard action attribute. This is useful to perform pre-final validation of a LiveView form submit before posting to a controller route for operations that require Plug session mutation.
is_horizontal boolean No false Whether label is on side of input field
has_error_icon boolean No false Whether error icon is shown
attrs map No %{} Additional ttributes to be added to form tag
default slot No - Default slot
Form.Input props
Name Type Required Default Description
id string No - Id to be given to the input tag
field atom No - Name of the field, usually should be taken from context
form form No - Form info, usually should be taken from context
size sm | md | lg No "md" Common moon size property
error boolean No - Some additional styling will be set to indicate the field is invalid. Generally should be set by Form.Field or Form.InsetField component
type date | month | datetime-local | email | number | password | search | tel | text | time | url No "text" HTML5 type of the input, please don't use checkbox or radio here
placeholder string No " " Text to be set as a HTML placeholder attribute - when input is empty
class css_class No - Additional classes for the <input> tag
field_class css_class No - Additional classes for the <input> tag in case of floating label or Group
value string No - Value of the input, don't use it inside the forms
testid string No - Data-testid attribute value
disabled boolean No - HTML disabled attribute for the input & some additional classes. Generally should be set by Form.Field or Form.InsetField component
readonly boolean No - Readonly - some additional classes and behaviour. Generally should be set by Form.Field or Form.InsetField component
autocomplete string No - Autocomplete HTML attribute for the input, use "off" to disable
opts any No %{} Keyword | Map of additional attributes for the input
on_change event No - On change event for the input - don't use it inside phoenix forms
on_keyup event No - On keyup event for the input
on_focus event No - On focus event for the input
on_blur event No - On blur event for the input
Form.Field props
Name Type Required Default Description
id string No - id attribute for DOM element
form form No - Form, Surface-style
field atom No - Field, Surface-style
size sm | md | lg No "md" Input size
label string No - Label for input field
hint string No - Hint for input field
hide_errors boolean No - Whether error message is shown
class css_class No - Additional Tailwind classes
error_class css_class No - Additional Tailwind classes
hint_class css_class No - Additional Tailwind classes
testid string No - data-testid attribute for DOM element
is_horizontal boolean No - Whether label is on side of input field
has_error_icon boolean No - Whether error icon is shown
attrs map No - -
default slot No - Inner content of the component