Textarea
A standard Html5 text box to use in your applications. You can
control the box text length with the
rows="*" attribute. Like other form controls,
textarea natively supports dark mode.
<div class="field">
<div class="control">
<textarea class="textarea" rows="4" placeholder="A longer message..."></textarea>
</div>
</div>
Focus Colors
Like other form controls, textareas can have different border
colors when focused. You simply have to add one of the
following modifiers to the textarea element:
is-primary-focus, is-success-focus,
is-info-focus, is-warning-focus,
is-danger-focus.
<div class="field">
<div class="control">
<textarea class="textarea is-primary-focus" rows="2" placeholder="Primary..."></textarea>
</div>
</div>
<div class="field">
<div class="control">
<textarea class="textarea is-success-focus" rows="2" placeholder="Success..."></textarea>
</div>
</div>
<div class="field">
<div class="control">
<textarea class="textarea is-info-focus" rows="2" placeholder="Info..."></textarea>
</div>
</div>
<div class="field">
<div class="control">
<textarea class="textarea is-warning-focus" rows="2" placeholder="Warning..."></textarea>
</div>
</div>
<div class="field">
<div class="control">
<textarea class="textarea is-danger-focus" rows="2" placeholder="Danger..."></textarea>
</div>
</div>
Loading State
A textarea can be shown in a loading state. For that, you need
to wrap it inside a control element. Then, simply
add the is-loading class to the wrapping
control element. Please refer to the code example
for more details about usage.
<div class="field">
<div class="control is-loading">
<textarea class="textarea" rows="4" placeholder="A longer message..."></textarea>
</div>
</div>
Disabled State
A textarea can be shown in a disabled state. For that, you
need to wrap it inside a control element. Simply
add the disabled attribute to the target textarea
element.
<div class="field">
<div class="control">
<textarea class="textarea" rows="4" placeholder="A longer message..." disabled></textarea>
</div>
</div>
Textarea Addon
Textareas that are wrapped by a control and a
field can have a single bottom addon. You can use
it to display a toolbar or any type of user actions. Please
refer to the code example for more details about usage.
<div class="field has-textarea-addon">
<div class="control">
<textarea class="textarea" rows="5" placeholder="A longer message..."></textarea>
</div>
<div class="control is-textarea-addon">
<div class="start">
<div class="avatar-stack">
<div class="h-avatar is-small">
<img class="avatar" src="https://via.placeholder.com/150x150" alt="">
</div>
<div class="h-avatar is-small">
<span class="avatar is-fake is-info">
<span>JD</span>
</span>
</div>
<div class="h-avatar is-small">
<img class="avatar" src="https://via.placeholder.com/150x150" alt="">
</div>
</div>
</div>
<div class="end">
<a class="button h-button is-primary is-raised">Post Comment</a>
</div>
</div>
</div>