Advanced Usage
Addons
Introduction
Addons provide a way to prepend or append text or an icon to an input. Both leading and trailing addons can be added to the input either by use of props or slots. When rendering the input, only one type of leading and one type of trailing addon will be rendered at a time.
In the examples shown on this page, we will be using the input
component, however addons will work with most other components as well.
Leading Addons
There are three types of "leading" addons offered by this package: leading addon, inline addon, and leading icon. Each of these will be rendered somewhere on the left side of an input element.
Leading Addon
A leading addon will be rendered as text on top of a light gray background at the beginning of the input. To render a leading
addon, specify the text either in the leading-addon
attribute or the leadingAddon
slot.
Via prop:
<x-input name="url" leading-addon="https://" />
Via slot:
<x-input name="url">
<x-slot:leading-addon>https://</x-slot:leading-addon>
</x-input>
Inline Addon
Inline addon is similar to leading addon, however there is no background behind the text. You are also responsible for setting the left padding of the input to allow for enough room for your text to fit at the beginning of the input.
You can set the inline addon by using the inline-addon
attribute or the inlineAddon
slot.
Via prop:
<x-input name="url" inline-addon="https://" />
Via slot:
<x-input name="url">
<x-slot:inline-addon>https://</x-slot:inline-addon>
</x-input>
To modify the padding, you should use a custom class on the input. Since this padding value is controlled via a variable, you could just use an arbitrary value in a custom class name:
<x-input
name="url"
inline-addon="https://"
class="![--inline-addon-pl:theme(spacing.4)]"
/>
This is the equivalent of pl-4
on the input. However, it's recommended to override the variable value instead. If you do it this way, you need to be sure to make the rule
!important
(prefix the class name with !
) so it actually overrides the variable value.
Leading Icon
Instead of text, you can prepend an icon to the input instead. The package is styled for blade heroicon svgs, but you are free to use whatever icons you want to.
To prepend an icon, you can use the leading-icon
prop, or the leadingIcon
slot:
Via prop:
<x-input name="url" leading-icon="heroicon-m-at-symbol" />
Via slot:
<x-input name="url">
<x-slot:leading-icon>
<x-heroicon-m-at-symbol />
</x-slot:leading-icon>
</x-input>
If you pass the icon name via prop, the component will use the <x-dynamic-component />
component behind-the-scenes to render the component for convenience.
Trailing Addons
There are three types of "trailing" addons offered by this package: trailing addon, trailing inline addon, and trailing icon. These all behave like the leading addon version of them, except now they will be on the right side of the input element.
Trailing Addon
Like the leading addon, the trailing addon will render text inside a light gray background at the end of the input this time. To render a trailing addon,
specify text in either the trailing-addon
prop or the trailingAddon
slot.
Via prop:
<x-input name="url" trailing-addon="lbs" />
Via slot:
<x-input name="url">
<x-slot:trailing-addon>lbs</x-slot:trailing-addon>
</x-input>
Trailing Inline Addon
Like the inline addon, the trailing inline addon will add text directly inside the input, but this time on the right side of the input. Also like the inline addon, you may need to specify a custom padding amount for the input.
You can add a trailing inline addon by using either the trailing-inline-addon
attribute or the trailingInlineAddon
slot.
Via prop:
<x-input name="amount" trailing-inline-addon="USD" />
Via slot:
<x-input name="amount">
<x-slot:trailing-inline-addon>USD</x-slot:trailing-inline-addon>
</x-input>
To adjust the amount of padding on the right side on the input, you should override the --inline-addon-pr
CSS variable. See Inline Addon
for an example on how to this.
Trailing Icon
You can append an icon to an input similar to prepending one. You can do so using either the trailing-icon
prop or the trailingIcon
slot:
Via prop:
<x-input name="url" trailing-icon="heroicon-m-magnifying-glass" />
Via slot:
<x-input name="url">
<x-slot:trailing-icon>
<x-heroicon-m-magnifying-glass />
</x-slot:trailing-icon>
</x-input>
If you pass the icon name via prop, the component will use the <x-dynamic-component />
component behind-the-scenes to render the component for convenience.
Before Slot
The before
slot allows you the flexibility to render any kind of HTML you need to directly before the input element. If you have a leading addon on the input, it will render before that markup.
<x-input>
<x-slot:before>
<div>Before slot content</div>
</x-slot:before>
</x-input>
After Slot
The after
slot allows you the flexibility to render any kind of HTML you need to directly after the input element. If you have a trailing addon on the input, it will render after that markup.
<x-input>
<x-slot:after>
<div>After slot content</div>
</x-slot:after>
</x-input>
Addon Slot Attributes
All types of leading and trailing addons (except the before and after slots) are able to render custom HTML attributes onto the addon markup for you. The only requirement is that you use the named slot for the addon, and not the prop.
The following example will add an id and an attribute called data-foo onto the leading addon markup for the input.
<x-input>
<x-slot:leading-addon id="hello-world" data-foo="bar">
Hello world
</x-slot:leading-addon>
</x-input>
Those attributes will be rendered onto the <span>
that wraps Hello world
and not onto the input itself.