Text
The text input component creates an HTML text input element.
<x-eloquent-ui::input.text name="username" />
Usage
In its most basic form, the text component only needs a name attribute to render a working input field, including
error handling and accessibility features. The ID of the input element is the same as the name attribute.
<x-eloquent-ui::input.text name="username" />
Type
By default, the input element is rendered as a type="text" input field. You can change this by setting the type
attribute. The component supports all HTML input types.
<x-eloquent-ui::input.text name="email" type="email" />
<x-eloquent-ui::input.text name="age" type="number" />
<x-eloquent-ui::input.text name="date" type="datetime-local" />
Label
You can set the label of the input field by using the label attribute. This will internally wrap the input component
in a Row component and open up all customisation options for the row.
<x-eloquent-ui::input.text name="username" label="Username:" />
If you want to use a custom label, you can set the label-id attribute to the ID of the custom label. This will
automatically add the necessary aria-labelledby attribute to the input field.
<label id="username-label" for="username">Username:</label>
<x-eloquent-ui::input.text name="username" label-id="username-label" />
Required inputs
You can mark an input as required by setting the required attribute. This will automatically add the necessary aria-
attributes to the input field. If your input uses a label through the label attribute, the label will also be marked
as required. This also opens up the required customisation options.
<x-eloquent-ui::input.text name="username" required />
Required indicator
If an input is required, you can change the indicator displayed next to the label. By default, an asterisk is displayed.
You can change this by setting the required-icon attribute. You can also change the default value for this indicator
in the config file to change it for all components.
<x-eloquent-ui::input.text name="username" label="Username:" required required-icon="*" />
Required style
You may also customise the style of the required indicator by adding the required-style="danger" attribute. The value
of this attribute should be one of your theme colours, like danger or primary. By default, the required indicator
is rendered as danger. You can also change the default value for this indicator in the config file to change it for
all components globally.
<x-eloquent-ui::input.text name="username" label="Username:" required required-style="warning" />
Disabled and readonly inputs
You can disable or make an input field readonly by setting the disabled or readonly attributes. This will
automatically add the necessary aria- attributes to the input field and also the label if you use the label
attribute.
<x-eloquent-ui::input.text name="username" readonly />
<x-eloquent-ui::input.text name="username" disabled="disabled" />
Hints
Hints are small texts that are displayed below the input field. They can be used to provide additional information. You
can add hints by using the hint attribute.
<x-eloquent-ui::input.text name="username" hint="Please enter your username." />
Other attributes
The text component supports all standard HTML attributes, like placeholder, min, max, step, title, pattern,
etc. You can add any of these attributes to the component, and they will be rendered on the input element.
<x-eloquent-ui::input.text name="username" title="Your username" pattern="[a-zA-Z0-9]+" placeholder="Choose a username." />
Features
Addons
You can add an addon to the left or right side of the input field by using the prefix or suffix slots. You are
free to write your own addon markup, but Eloquent UI also provides a number of predefined addons for you to use. These
predefined addons can be found in the input.addon namespace.
<x-eloquent-ui::input.text name="username">
<x-slot:prefix id="username-prefix">
<x-eloquent-ui::input.addon.text id="username-prefix" style="primary">@</x-eloquent-ui::input.addon.text>
</x-slot:prefix>
</x-eloquent-ui::input.text>
<x-eloquent-ui::input.text name="website">
<x-slot:suffix id="website-suffix">
<x-eloquent-ui::input.addon.icon id="website-suffix">.com</x-eloquent-ui::input.addon.icon>
</x-slot:suffix>
</x-eloquent-ui::input.text>
Both the prefix and suffix slots require a unique id attribute, which must be the same id as the addon itself.
This is so that accessibility features like aria-describedby work correctly for things like screen readers.
See the addon documentation for more details about addons.
Combining text inputs with rows
Like all other input components, the text component can be combined with the row component to create a more complex input field.
<x-eloquent-ui::form.row for="username" label="Username" required>
<x-eloquent-ui::input.text name="username" required>
</x-eloquent-ui::form.row>
See the row documentation for more information.
Backend logic
The text input component has no custom backend logic. All normal Laravel validation rules can be used with this component.
Advanced usage
You can add custom data- attributes to the input element by adding them to the component. These attributes will be
rendered on the input element.
<x-eloquent-ui::input.text name="username" data-custom="custom-value" />