The venerable <input type="text" /> form component.
| field | Yes* | (none) |
The field on the form that this control refers to. This will most likely be a
field on the form's related model. The field is used to generate defaults for
other attributes if they are not explicitly specified, and might be the only
attribute you need to set.
Note: This field is optional if you're hanging
|
| type | no | "text" |
Selects the input type attribute. Most useful when selecting
text-based types, like "email, "search", "url," and "tel." When possible, the
type will be inferred from the value of "field," documented below.
Note that this is not the same as the |
| label | no |
ucfirst($field)
|
The label to put on the text input. Appears above the input control. |
| value | no | (none) |
The value that should pre-populate the control. If specified, the actual value
will be @old($field, $value).
|
| placeholder | no |
value of "label", if set. Otherwise, ucfirst($field)
|
The placeholder text used inside the control when it is empty. |
| lefticon | no | (none) |
Icon to place within the left side of the control. The icon will be rendered
with the @svg() Blade
directive, so any icon pack in Blade Icons can be used.
EUIKit supports Heroicons by default.
|
| righticon | no | (none) |
Icon to place within the right side of the control. The icon will be rendered
with the @svg() Blade
directive, so any icon pack in Blade Icons can be used.
EUIKit supports Heroicons by default.
|
| inputclasses | no | (none) |
Classes that will be applied directly to the <input /> element. Styles given to the
component directly are applied to the surrounding div. This attribute
is useful when defining breakpoint size classes, or otherwise manipulating the
text box itself.
|
| required | no | FALSE | If present (or set to TRUE), will mark the control as required. If the control is required, it must be non-empty at form submission time. |
| nolabel | no | FALSE | If present (or set to TRUE), the label will not be rendered, and only the control will be visible. |
| help | no | (none) | Inline help for this field. See the Help component for details. |
Which control to actually present to the browser can be inferred from the value of the "field" attribute. The following field names are supported:
| "pass" | "password" |
| "password" | "password" |
| "search" | "search" |
| "q" | "search" |
| "email" | "email" |
| "url" | "url" |
| "phone" | "tel" |
| "telephone" | "tel" |
| "tel" | "tel" |
You can override these automatic types by specifying a type attribute.
If the type attribute is "search", the field will be presented with a default search icon. If you
specify a lefticon, it will be used instead. To
suppress the icon, use lefticon="none".
<x-e::form.text field="search" nolabel />
<x-e::form.text field="search" noplaceholder lefticon="heroicon-o-document-magnifying-glass" />
<x-e::form.text field="search" lefticon="none" nolabel />
The form.input component is very
happy to be used inside a Livewire component. The component will render any "wire:" attributes on the <input /> component itself. When
using this component in a Livewire component, the "field" attribute is optional, and will default to the value of wire:model.
<x-euikit::form.text field="username" help="inline help" />
<x-euikit::form.text field="account" label="Billable Project Number" noplaceholder />
<x-euikit::form.text nolabel field="username" />
<x-euikit::form.text field="accomplishment" lefticon="heroicon-o-star" righticon="heroicon-o-flag" />
<x-euikit::form.text wire:model.blur="username" label="Name"/>