Text Component
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.
|
| 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. |
Automatically inferring type
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.
Search
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 />
Usage with Livewire
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.
Text Component Examples
<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"/>