InsetInput
In progress
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.
Default
States
Custom styles
Types
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.InsetField props
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| id | string | No | - | Id attribute for DOM element |
| form | form | No | - | Form info, usually should be taken from context |
| field | atom | No | - | Field name, surface-style |
| label | string | No | - | Label for input field |
| hint | string | No | - | Hint for input field |
| hide_errors | boolean | No | - | Whether error message is shown |
| disabled | boolean | No | - | Sets disabled state |
| readonly | boolean | No | - | Sets read-only state |
| class | css_class | No | - | Additional Tailwind classes |
| field_class | css_class | No | - | Additional Tailwind classes |
| testid | string | No | - | Data-testid attribute for DOM element |
| default | slot | No | - | Inner content of the component |