<!-- form.blade.php -->
<form class="c-form js-form-validation" autocomplete="on" id="67edf8b547ab1" data-uid="67edf8b547ab6" 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="67edf8b547890" data-uid="67edf8b5478a4">
<label class="c-field__label " for="input_67edf8b547890" id="label_67edf8b547890">
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_67edf8b547890" aria-labelledby="label_67edf8b547890" 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" material-symbol="error_outline" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="67edf8b5478de">
</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" material-symbol="check_circle_outline" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="67edf8b547917">
</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="67edf8b547960" data-uid="67edf8b547971">
<label class="c-field__label " for="input_67edf8b547960" id="label_67edf8b547960">
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_67edf8b547960" rows="15" style="resize: none;" aria-labelledby="label_67edf8b547960" 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" material-symbol="error_outline" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="67edf8b5479a1">
</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" material-symbol="check_circle_outline" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="67edf8b5479d4">
</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="67edf8b547a19" data-uid="67edf8b547a29">
<label class="c-field__label " for="input_67edf8b547a19" id="label_67edf8b547a19">
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_67edf8b547a19" rows="15" style="resize: none;" aria-labelledby="label_67edf8b547a19" 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" material-symbol="error_outline" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="67edf8b547a58">
</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" material-symbol="check_circle_outline" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="67edf8b547a89">
</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