bladewindUI
Displays a textbox or text input element. This component in fact works for all the possible values of <input type="" .../>.
The default type is text.
<x-bladewind.input />
<x-bladewind.input type="password" />
<x-bladewind.input numeric="true" />
<x-bladewind.input placeholder="Full name" />
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" />
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. See why we hide 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 helper function 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('.signup-form').addEventListener('submit', function (e){
e.preventDefault();
signUp();
});
signUp = () => {
if (validateForm('.signup-form')) {
// do this if form is validated
unhide('.btn-save .bw-spinner')
}
}
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
|
<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="" />
resources > views > components > bladewind > input.blade.php