<!-- form.blade.php -->
<form class="c-form js-form-validation" autocomplete="on" id="id_68b86c22e6b64" data-uid="68b86c22e6b6a" method="POST" action="#">

    
    
    <div class="grid">
        <div class="grid-md-12">
                <h2>Textarea</h2>
                <!-- field.blade.php -->
<div class="c-field c-field--text c-field--md c-field--radius-md" id="id_68b86c22e68d4" data-uid="68b86c22e68ec">
    
            <label class="c-field__label " for="input_id_68b86c22e68d4" id="label_id_68b86c22e68d4">
            Send us a message!
                            <span class="u-color__text--danger" aria-hidden="true">*</span>
                    </label>
            
    <div class="c-field__inner c-field__inner--text">
        
        
        
            
            <textarea id="input_id_68b86c22e68d4" aria-labelledby="label_id_68b86c22e68d4" placeholder="Elit Quam Porta Parturient Adipiscing" type="text" name="message" required="required" data-js-required="" data-required="1" aria-required="true" autocomplete="off"></textarea>
            <div class="c-field_focus-styler u-level-top"></div> 
        
        
        
        
            <!-- icon.blade.php -->
    <span class="c-icon c-field__suffix c-field__error-icon c-icon--error-outline c-icon--material c-icon--material-error_outline material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" data-material-symbol="error_outline" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="68b86c22e6934">
                    </span>

        
            <!-- icon.blade.php -->
    <span class="c-icon c-field__suffix c-field__success-icon c-icon--check-circle-outline c-icon--material c-icon--material-check_circle_outline material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" data-material-symbol="check_circle_outline" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="68b86c22e6970">
                    </span>

    </div>

    
    </div>
        </div>

        <div class="grid-md-12">
                <h2>Textarea - Invalid</h2>
                <!-- field.blade.php -->
<div class="c-field is-invalid c-field--text c-field--md c-field--radius-md" id="id_68b86c22e69d6" data-uid="68b86c22e69ec">
    
            <label class="c-field__label " for="input_id_68b86c22e69d6" id="label_id_68b86c22e69d6">
            Send us a message!
                            <span class="u-color__text--danger" aria-hidden="true">*</span>
                    </label>
            
    <div class="c-field__inner c-field__inner--text">
        
        
        
            
            <textarea id="input_id_68b86c22e69d6" rows="15" style="resize: none;" aria-labelledby="label_id_68b86c22e69d6" placeholder="Elit Quam Porta Parturient Adipiscing" type="text" name="message" required="required" data-js-required="" data-required="1" aria-required="true" autocomplete="off"></textarea>
            <div class="c-field_focus-styler u-level-top"></div> 
        
        
        
        
            <!-- icon.blade.php -->
    <span class="c-icon c-field__suffix c-field__error-icon c-icon--error-outline c-icon--material c-icon--material-error_outline material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" data-material-symbol="error_outline" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="68b86c22e6a2c">
                    </span>

        
            <!-- icon.blade.php -->
    <span class="c-icon c-field__suffix c-field__success-icon c-icon--check-circle-outline c-icon--material c-icon--material-check_circle_outline material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" data-material-symbol="check_circle_outline" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="68b86c22e6a64">
                    </span>

    </div>

    
    </div>
        </div>

        <div class="grid-md-12">
                <h2>Textarea - Valid</h2>
                <!-- field.blade.php -->
<div class="c-field is-valid c-field--text c-field--md c-field--radius-md" id="id_68b86c22e6ab0" data-uid="68b86c22e6ac4">
    
            <label class="c-field__label " for="input_id_68b86c22e6ab0" id="label_id_68b86c22e6ab0">
            Send us a message!
                            <span class="u-color__text--danger" aria-hidden="true">*</span>
                    </label>
            
    <div class="c-field__inner c-field__inner--text">
        
        
        
            
            <textarea id="input_id_68b86c22e6ab0" rows="15" style="resize: none;" aria-labelledby="label_id_68b86c22e6ab0" placeholder="Elit Quam Porta Parturient Adipiscing" type="text" name="message" required="required" data-js-required="" data-required="1" aria-required="true" autocomplete="off"></textarea>
            <div class="c-field_focus-styler u-level-top"></div> 
        
        
        
        
            <!-- icon.blade.php -->
    <span class="c-icon c-field__suffix c-field__error-icon c-icon--error-outline c-icon--material c-icon--material-error_outline material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" data-material-symbol="error_outline" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="68b86c22e6af9">
                    </span>

        
            <!-- icon.blade.php -->
    <span class="c-icon c-field__suffix c-field__success-icon c-icon--check-circle-outline c-icon--material c-icon--material-check_circle_outline material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" data-material-symbol="check_circle_outline" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="68b86c22e6b2f">
                    </span>

    </div>

    
    </div>
        </div>

        <div class="grid-md-12">
            <input type="submit">
        </div>
    </div>
</form>

@form([
    'attributeList' => [
        'autocomplete' => 'on'
    ]
])
    <div class="grid">
        <div class="grid-md-12">
            @markdown
                ##Textarea
            @endmarkdown

            @field([
                'type' => 'text',
                'placeholder' => 'Elit Quam Porta Parturient Adipiscing',
                'name' => 'message',
                'autocomplete' => 'off',
                'label' => "Send us a message!",
                'required' => true,
                'multiline' => true
            ])
            @endfield
        </div>

        <div class="grid-md-12">
            @markdown
                ##Textarea - Invalid
            @endmarkdown

            @field([
                'type' => 'text',
                'placeholder' => 'Elit Quam Porta Parturient Adipiscing',
                'name' => 'message',
                'autocomplete' => 'off',
                'label' => "Send us a message!",
                'required' => true,
                'multiline' => 15,
                'classList' => [
                    'is-invalid'
                ]
            ])
            @endfield
        </div>

        <div class="grid-md-12">
            @markdown
                ##Textarea - Valid
            @endmarkdown

            @field([
                'type' => 'text',
                'placeholder' => 'Elit Quam Porta Parturient Adipiscing',
                'name' => 'message',
                'autocomplete' => 'off',
                'label' => "Send us a message!",
                'required' => true,
                'multiline' => 15,
                'classList' => [
                    'is-valid'
                ]
            ])
            @endfield
        </div>

        <div class="grid-md-12">
            <input type="submit">
        </div>
    </div>
@endform