v2.8.1
Displays a text input element. This is also commonly known as a text box. This component in fact works for all the possible values of <input type="" .../>.
The default is input type="text". This Bladewind component simply wraps the HTML input so you are free to use all the various
input attributes available in HTML.
<x-bladewind::input />
This behaves just like the regular HTML password input. Nothing fancy. Any values entered into this field are masked.
<x-bladewind::input type="password" />
The component allows you to specify if the user should be able to view the password they entered by clicking on an eye. This can be achieved by setting
viewable="true".
The eye is appended as a suffix to the input. Clicking on the eye when the password is revealed, hides the pasword.
The eye icon will be displayed ONLY if the input type="password". It will be ignored in all other cases.
<x-bladewind::input type="password" viewable="true" />
This accepts only numeric values. Useful when entering phone numbers, age or amounts.
By default the decimal point is not allowed as it is technically not a number. In cases where you need decimals, use the attribute with_dots="true"
<x-bladewind::input numeric="true" />
You may want users to enter a minimum or maximum number when using the numeric input. For example, let's say employees cannot request more than 5 days off per leave request. Your input could restrict the maximum number of days off to 5 when a user is filling the form.
<x-bladewind::input
placeholder="Minimum is 3"
name="input-min"
numeric="true"
min="3"
error_message="Minimum value must be 3"
show_error_inline="true" />
<x-bladewind::input
placeholder="Maximum is 12"
name="input-max"
numeric="true"
max="12"
error_message="Maximum value must be 12" />
You can display the BladewindUI textbox with labels. Labels present themselves as placeholders but jump to the top border of the textbox when that field has focus.
This is a nice way to build compact looking forms without having form labels in the way. If you prefer to create and style your own form labels, simply ignore the label attribute and use the placeholder attribute instead.
<x-bladewind::input label="Full name" />
<x-bladewind::input placeholder="Full name" />
The label attribute actually replaces placeholder. In most common cases input labels are displayed above
the input box and don't interfere with the input's placeholder text. However, the label for Bladewind's Textbox component is designed to sit in the same spot where the placeholder text is displayed and covers it up.
Having a placeholder text that is longer than your label text results in some parts of the placeholder text sticking out under the label. If you want the placeholder to still be shown even when there is a label, set show_placeholder_always="true"
<x-bladewind::input
name="mobile" label="Mobile" placeholder="000.0000.000" />
From the example above you will notice the placeholder is sticking out under the label. This is because the placeholder text is longer than the label. This is why Bladewind hides the placeholder when the label is set. One way to fix this is by appending non breaking spaces to your label till the placeholder text is covered. This is an ugly solution.
<x-bladewind::input name="mobile"
label="Mobile "
placeholder="000.0000.000"
show_placeholder_always="true" />
This either adds a red asterisk sign to the placeholder text or a red star to the label of the input field.
<x-bladewind::input required="true" label="Full name" />
You can append any of the available HTML event attributes (onclick, onblur, onfocus, onmouseover, onmouseout, onkeyup, onkeydown etc) to the component, just like you would to a regular <input ... tag.
The border of the textbox below turns red onfocus and to gray onblur.
<x-bladewind::input
name="events"
label="Full name"
required="true"
onfocus="changeCss('.events', '!border-2,!border-red-400')"
onblur="changeCss('.events', '!border-2,!border-red-400', 'remove')" />
Bladewind comes with a very handy Javascript helper function (validateForm(element)) for validating input and textarea fields that have the attribute required='true" set.
The best way to explain this is to look at an actual sign up form example.
Let's take a look at the code for the form and then proceed to break it down.
<x-bladewind.notification />
<x-bladewind.card>
<form method="get" class="signup-form">
<h1 class="my-2 text-2xl font-light text-blue-900/80">Create Account</h1>
<p class="mt-3 mb-6 text-blue-900/80 text-sm">
This is a sign up form example to demonstrate how to validate forms using Bladewind.
</p>
<x-bladewind::input
name="fname"
required="true"
label="Full Name"
error_message="You will need to enter your full name" />
<div class="flex gap-4">
<x-bladewind::input
name="email"
required="true"
label="Email" />
<x-bladewind::input
name="mobile"
label="Mobile"
numeric="true" />
</div>
<x-bladewind.textarea
required="true"
name="bio"
error_message="Yoh! write something nice about yourself"
show_error_inline="true"
label="Describe yourself"></x-bladewind.textarea>
<div class="text-center">
<x-bladewind.button
name="btn-save"
has_spinner="true"
type="primary"
can_submit="true"
class="mt-3">
Sign Up Today
</x-bladewind.button>
</div>
</form>
</x-bladewind.card>
Error messages can either be displayed inline or using the Bladewind notification component.
You will notice we included the Notification component on line 1. On line 5 we have a form with a class of signup-form.
This class will be used to set up an event listener on the form. On line 16 out input component defines an error_message attribute.
This message is what will be displayed if we validate the form and find that field to be empty. The error_message attribute will
only be used if the required="true" attribute has been set on the input component.
Our email input has set required="true" but has no error_message attribute defined. You will notice
when we submit the form with no email value, the field is highlighted with a red border but no message is displayed.
Lastly, our textarea component defines a new attribute on line 36. The show_error_inline="true" attribute will display the
error message beneath the field the attribute was set on.
Below is the javascript that triggers the validation of the form. dom_el, unhide and validateForm are helper functions in the package.
/**
dom_el(), validateForm(), hide() and unhide()
are helper functions available in BladewindUI
**/
dom_el('.signup-form').addEventListener('submit', function (e){
e.preventDefault();
signUp();
});
signUp = () => {
(validateForm('.signup-form')) ?
unhide('.btn-save .bw-spinner') : // do this is validated
hide('.btn-save .bw-spinner'); // do this if not validated
}
There are several instances where you will want to manipulate input fields for different reasons.
Most times, manipulating an input field will be dependent on a user's selection. This can be achieved in
Javascript since BladewindUI uses the name attribute defined on an input as part of its class attribute.
Let us take a look at a few examples from below.
In the example below any user below 18 years will need to provide the name and email of their guardian.
You are one step away from an awesome summer experience.
Let's take a look at the code for the form and then proceed to look at the Javascript that's triggered. Pay attention to lines 4 and 12.
...
<div class="flex gap-4">
<x-bladewind::input name="full_name" required="true" label="Full name" />
<x-bladewind::input name="age_camp" label="How old are you?"
required="true" numeric="true" with_dots="true" />
</div>
<b class="guardian-info py-2 block hidden">Who is your guardian?</b>
<div class="guardian flex gap-4 hidden">
<x-bladewind::input name="guardian_name_camp" required="true" label="Guardian's Name" />
<x-bladewind::input name="guardian_email_camp"
label="Guardian's email"
onkeyup="showAddress(this.value)" />
</div>
<x-bladewind::input name="guardian_address" placeholder="Guardian's address" class="hidden" />
...
From the above form, we want to perform an action when the value of the age_camp input field changes.
The resultant HTML code generated for the input field is below.
<input
class="bw-input peer required age_camp placeholder-transparent dark:placeholder-transparent"
type="text"
id="age_camp"
name="age_camp"
value=""
autocomplete="off"
placeholder="How old are you?" />
The name we provided to the Input component has been used as part of the class names of the component.
This makes it easy for us to access the component in Javascript. Below is the script that performs the hiding and unhiding of the DIVs based on the value of the age input.
In this example we use an event listener on the age_camp input to listen for any changes to the input on keyup.
Entering a value in the guardian email field also unhides an address field. This however uses an onkeyup event defined on the input field itself.
// dom_el, unhide and hide are helper functions in BladewindUI
dom_el('.age_camp').addEventListener('keyup', (el) => {
if(el.target.value !== '' && el.target.value < 18 ){
unhide('.guardian-info');
unhide('.guardian');
} else {
hide('.guardian-info');
hide('.guardian');
}
})
showAddress = (value) => {
if(value !== '') unhide('.guardian_address');
}
There are cases where you need to prefix or append something to an input field. For example, you want to prefix a URL input field with 'https://' so your users wouldn't need to type that in everytime. Or, when asking your app users for their social media handles you may want to always have the '@' prefix. For now prefixes and suffixes support only text and icons.
You can use prefixes even when your input has a label.
<x-bladewind::input name="site" label="website address" prefix="https://" />
You can drop the label and use a placeholder instead.
<x-bladewind::input name="site2" placeholder="website address" prefix="https://" />
<x-bladewind::input name="usd" placeholder="0.00" prefix="USD" />
<x-bladewind::input name="twitter" placeholder="Twitter handle" prefix="@" />
<x-bladewind::input name="gh" placeholder="username" prefix="https://github.com/" />
Suffixes get appended to the end of the input field
<x-bladewind::input name="space" placeholder="workspace-name" suffix=".slack.com" />
<x-bladewind::input
name="tnc"
placeholder="Your bio. Keep it brief and nice"
suffix='<a href="#">See some good examples</a>' />
You can opt for non-transparent prefixes and suffixes by setting the attribute transparent_prefix="false" and/or transparent_suffix="false".
You can specify both a prefix and suffix on your input fields.
<x-bladewind::input
name="usdbg"
placeholder="0.00"
prefix="USD"
transparent_prefix="false"
numeric />
<x-bladewind::input
name="spacex"
placeholder="workspace-name"
transparent_suffix="false"
suffix=".slack.com" />
<x-bladewind::input
name="spacexx"
prefix="https://"
transparent_prefix="false"
placeholder="workspace-name"
suffix=".slack.com"
transparent_suffix="false" />
The BladewindUI input field can have an icon for those moments where you want a simple icon to describe the field. This is not a different kind of input field. We simply make use of prefixes and suffixes to achieve this effect. All Heroicons names are supported out of the box. You can also specify an SVG tag to be used as an icon.
Since input icons are achieved using prefixes, it is important to add the attribute prefix_is_icon="true" if you are using icons as prefixes or suffix_is_icon="true" if you are using icons as suffixes.
This way Bladewind forces your prefix or suffix to be an icon and not text. For example: if you specify the prefix "phone", by default Bladewind will just display the text "phone" as your prefix. However, if you specify
prefix_is_icon="true", Bladewind will look for the icon with the name "phone" and display that instead.
<x-bladewind.centered-content size="small">
<x-bladewind::input
name="fullname"
placeholder="John T. Doe"
prefix="user"
prefix_is_icon="true" />
<x-bladewind::input
name="emailic"
placeholder="me@bladewindui.com"
prefix="envelope"
prefix_is_icon="true" />
<div class="flex gap-4">
<x-bladewind::input
name="fon"
placeholder="0000.000.00"
prefix="phone"
prefix_is_icon="true" />
<x-bladewind::input
name="passw" type="password"
placeholder="Password"
prefix="key"
prefix_is_icon="true"
prefix_icon_css="text-orange-500"
viewable="true" />
</div>
<x-bladewind.button class="w-full">Sign Up</x-bladewind.button>
</x-bladewind.centered-content>
As explained on the BladewindUI Icon component page, it is possible to use SVG tags and custom SVG files as the input icons.
<x-bladewind::input
name="www"
placeholder="website address"
prefix_is_icon="true"
prefix='<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 21a9.004 9.004 0 008.716-6.747M12 21a9.004 9.004 0 01-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 017.843 4.582M12 3a8.997 8.997 0 00-7.843 4.582m15.686 0A11.953 11.953 0 0112 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0121 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0112 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 013 12c0-1.605.42-3.113 1.157-4.418" />
</svg>' />
<x-bladewind::input
name="www"
placeholder="website address"
prefix_is_icon="true"
transparent_prefix="false"
prefix='<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 21a9.004 9.004 0 008.716-6.747M12 21a9.004 9.004 0 01-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 017.843 4.582M12 3a8.997 8.997 0 00-7.843 4.582m15.686 0A11.953 11.953 0 0112 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0121 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0112 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 013 12c0-1.605.42-3.113 1.157-4.418" />
</svg>' />
Clearable fields display an x icon when a field has a value entered. Clicking on the x icon deletes the text in the input field. Quite handy and saves users from clicking the backspace several times in say, a search field.
This is achieved by setting the clearable="true" attribute. If there is a table that shares the same name as the input field, it will be reset as well. This is useful when
displaying searchable BladewindUI tables.
The input field comes in sizes to match the various button sizes. This is useful if you wish to have an input field and a button on one line.
Set the size attribute to achieve this. The tiny size is not supported for input fields because it was just too tiny to make UX sense.
<x-bladewind::input label="I am small" size="small" />
<x-bladewind::input label="I am regular" />
<x-bladewind::input label="I am medium" size="medium" />
<x-bladewind::input label="I am big" size="big" />
The table below shows a comprehensive list of all the attributes available for the Input component.
| Option | Default | Available Values |
|---|---|---|
| name | input-uniqid() | Unique name to identify the input element by. Useful for retrieving value from the input when it is submitted in a form. The component by default uses a random name prefixed with 'input-'. |
| type | text |
Accepts list of valid HTML input element types. text email password search tel
|
| label | blank | Label that describes the input element. Example: Full name |
| numeric | false | Sepcifies if the input element should accept only numeric characters. true false |
| required | false | Specifies if the input element is required or not. When required, a red asterisk is displayed next to the placeholder or label.true false |
| add_clearing | true | Specifies if an 8px margin should be added to the bottom of the element. This ensures your form fields are evenly spaced by default. true false |
| placeholder | blank | Placeholder text to display in the input element. |
| show_ placeholder_ always | false |
Placeholder text is hidden when the label attribute has a value. Setting this to true always shows the placeholder.true false
|
| error_message | blank | The message to display when the form is validated and field happens to be blank. |
| show_error_inline | false | Error messages can either be displayed inline or using the Notification component (default).true false |
| error_heading | Error | Only used when displaying validation errors using the Notification component. Because the validation errors are triggered from javascript, it may not be easy to translate the heading of the notification message. This provides a way to specify a translatable heading for the error. |
| selected_value | blank | Default value to display in the input element. Useful when in edit mode. |
| with_dots | true |
Mostly relevant if numeric="true". Determines if numeric values can contain dots or not.true false
|
| prefix | blank | Specify the prefix for the input field |
| prefix_is_icon | false |
If prefix is specified, is it an icon. By default prefixes are treated as text.true false
|
| prefix_icon_type | outline |
If an icon is used as a prefix, should it be a solid or outline icon..outline solid
|
| transparent_prefix | true |
If a prefix is defined, should it have a transparent background or not.true false
|
| prefix_icon_div_css | blank | Additional css classes to apply to the DIV containing the prefix if prefix_is_icon=true. Can be any TailwindCSS classes. |
| prefix_icon_css | blank | Additional css classes to apply to the prefix if prefix_is_icon=true. Can be any TailwindCSS classes that work on icons. |
| suffix | blank | Specify the suffix for the input field |
| suffix_is_icon | false |
If suffix is specified, is it an icon. By default suffixes are treated as text.true false
|
| suffix_icon_type | outline |
If an icon is used as a suffix, should it be a solid or outline icon.outline solid
|
| transparent_suffix | true |
If a suffix is defined, should it have a transparent background or not.true false
|
| suffix_icon_div_css | blank | Additional css classes to apply to the DIV containing the suffix if suffix_is_icon=true. Can be any TailwindCSS classes. |
| suffix_icon_css | blank | Additional css classes to apply to the suffix if suffix_is_icon=true. Can be any TailwindCSS classes that work on icons. |
| viewable | false |
Works only if type=password. Should the password be viewable? If true, an eye icon is displayed in the input field.true false
|
| clearable | false |
Works as a suffix. Appends an 'x' circle for clearing any text that has been entered in the input field.true false
|
| size | medium |
Sizing of the input to match button sizes in case you have an input and a button on one line.small regularmedium big
|
<x-bladewind::input
name="pin"
label="Enter PIN"
placeholder=""
type="password"
numeric="false"
add_clearing="false"
required="true"
error_message="PIN can only be 4 digits"
show_error_inline="true"
error_heading="Bugged"
with_dots="true"
show_placeholder_always="true"
selected_value=""
size="medium"
prefix="Email"
transparent_prefix="false"
prefix_is_icon="false"
prefix_icon_type="solid"
prefix_icon_css=""
suffix="@gmail.com"
transparent_suffix="false"
suffix_is_icon="false"
suffix_icon_type="solid"
suffix_icon_css=""
viewable="false"
clearable="false"
/>
resources > views > components > bladewind > input.blade.php