Skip to main content

Template

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" />

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.

<x-eloquent-ui::input.text name="username" required />

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.

<x-eloquent-ui::input.text name="username" readonly />

<x-eloquent-ui::input.text name="username" disabled="disabled" />

Label​

The text input component has no label of its own. You can add a label of your own or wrap the input in an Eloquent UI Row component. When the label is in a unique spot or has no for attribute pointing to the input, you can add the ID of the label via the label-id="" attribute. This will set the aria-labelledby attribute on the input field.

<label id="username-label">Username</label>

<x-eloquent-ui::input.text name="username" label-id="username-label" />

Hints​

Hints are small texts that are displayed below the input field. They can be used to provide additional information or to display validation errors. You can add hints by using the hint attribute.

<x-eloquent-ui::input.text name="username" hint="Please enter your username." />

Other attributes​

The input 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>
Accessibility

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" />