The input component offers a high degree of flexibility and customization. Users can easily add labels and descriptions to the input, and they have the option to include icons on both the left and right sides for additional visual elements. Furthermore, the component supports prefixes and suffixes to further tailor the input's content. For those seeking even greater customization, the prepend and append slots provide extensive options for designing the input to suit their specific needs and preferences.

The input can be easily utilized by simply adding a label.

1<x-input
2    label="Name"
3    placeholder="your name"
4/>

An additional option for the input is to include a description.

1<x-input
2    label="Name"
3    placeholder="your name"
4    description="Inform your full name"
5/>

Within the input, there is also the option to utilize the corner attribute.

1<x-input
2    label="Name"
3    placeholder="your name"
4    corner="Ex: John"
5/>

You can also consider adding an icon to the left.

1<x-input
2    icon="user"
3    label="Name"
4    placeholder="your name"
5/>

Another option is to include an icon on the right.

1<x-input
2    right-icon="user"
3    label="Name"
4    placeholder="your name"
5/>

If needed, the user can utilize icons on both sides.

1<x-input
2    icon="user"
3    right-icon="pencil"
4    label="Name"
5    placeholder="your name"
6/>

Furthermore, you have the option of incorporating prefixes.

1<x-input
2    label="Website"
3    placeholder="your-website.com"
4    prefix="https://www."
5/>

You can also enhance the input by including suffixes.

1<x-input
2    label="Email"
3    placeholder="your email"
4    suffix="@mail.com"
5/>

For even more extensive customization, you can make use of the prepend slot.

 1<x-input label="Name" placeholder="your name">
 2    <x-slot name="prepend">
 3        <x-button
 4            class="h-full"
 5            icon="bars-arrow-up"
 6            rounded="rounded-l-md"
 7            primary
 8            flat
 9        />
10    </x-slot>
11</x-input>

Additionally, the append slot is available for further customization.

 1<x-input label="Name" placeholder="your name">
 2    <x-slot name="append">
 3        <x-button
 4            class="h-full"
 5            icon="bars-arrow-up"
 6            rounded="rounded-r-md"
 7            primary
 8            flat
 9        />
10    </x-slot>
11</x-input>