bladewindUI

Textarea

Displays a textarea. By default the textarea is displayed with three rows. You can increase the number of rows by setting the rows attribute. Example, rows="5".

                    
                        <x-bladewind.textarea  />
                    
                


Add Placeholder Text

                    
                        <x-bladewind.textarea placeholder="Comment"  />
                    
                


With Labels


You can display the BladewindUI textarea with labels. Labels present themselves as placeholders but jump to the top border of the textarea 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.textarea label="Comment"  />
                    
                


Required Fields


This either adds a red asterisk sign to the placeholder text or a red star to the label of the textarea field.

                    
                        <x-bladewind.textarea required="true" label="Comment"  />
                    
                

See component/input documentation on Validating Required Fields.


Events


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 <textarea ... tag. The border of the textarea below turns red onfocus and to gray onblur.

                    
                        <x-bladewind.texarea 
                            name="events" 
                            label="Comment" 
                            required="true" 
                            onfocus="changeCss('.events', '!border-2,!border-red-400')" 
                            onblur="changeCss('.events', '!border-2,!border-red-400', 'remove')">
                        </x-bladewind.textarea>
                    
                

 

Full List Of Attributes

The table below shows a comprehensive list of all the attributes available for the Textarea component.

IMPORTANT: Projects running Laravel 8 please read this

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.
selected_value blank Default value to display in the input element. Useful when in edit mode.

 

Input with all attributes defined

                
                    <x-bladewind.input 
                        name="pin"
                        label="Enter PIN" 
                        placeholder=""
                        type="password"
                        numeric="false" 
                        add_clearing="false" 
                        required="true"
                        selected_value="" />
                
            

 

The source file for this component is available in resources > views > components > bladewind > input.blade.php