Textarea

The multiline textarea and its variations

The Bulma textarea is the multiline version of the input element. To use a Textarea component in your application, you need to import the BulmaTextareaModule by adding the following lines to your app.module.ts file.

import { BulmaTextareaModule } from 'ngx-bulma';

@NgModule({
  imports: [BulmaTextareaModule]
  // ...
})
export class AppModule {}

To display the Bulma textarea component in your Angular application, add the buTextarea directive in the <textarea> tag.

Directive Description
buTextarea For displaying a textarea element as Bulma textarea
Properties Description
theme Set the theme of the textarea
size Set the size of the textarea
hovered Set the hover state of the textarea, default value is false
focus Set the focus state of the textarea, default value is false
rounded Make the edges rounded, giving the textarea a capsule like shape, default value is false

Sizes

You can set the size of the textarea using one the 4 size options:

  • small
  • normal
  • medium
  • large

<textarea buTextarea size="small" placeholder="Small textarea"></textarea>
<textarea buTextarea placeholder="Normal textarea"></textarea>
<textarea buTextarea size="medium" placeholder="Medium textarea"></textarea>
<textarea buTextarea size="large" placeholder="Large textarea"></textarea>

States

  • To define the hovered state of the input, set the hovered property to true.
  • To define the focused state of the input, set the focus property to true.
  • To disable the resizing of textarea, set the fixed property to true.

Normal

Hover

Focus

Fixed Size

<textarea buTextarea placeholder="Normal textarea"></textarea>
<textarea buTextarea hovered="true" placeholder="Hovered textarea"></textarea>
<textarea buTextarea focus="true" placeholder="Focused textarea"></textarea>
<textarea buTextarea fixed="true" placeholder="Fixed size textarea"></textarea>

Themes

You can change the theme of the textarea using one the 8 theme options:

  • black
  • dark
  • primary
  • link
  • info
  • success
  • warning
  • danger

<textarea buTextarea theme="black" placeholder="Black textarea"></textarea>
<textarea buTextarea theme="dark" placeholder="Dark textarea"></textarea>
<textarea buTextarea theme="primary" placeholder="Primary textarea"></textarea>
<textarea buTextarea theme="link" placeholder="Link textarea"></textarea>
<textarea buTextarea theme="info" placeholder="Info textarea"></textarea>
<textarea buTextarea theme="success" placeholder="Success textarea"></textarea>
<textarea buTextarea theme="warning" placeholder="Warning textarea"></textarea>
<textarea buTextarea theme="danger" placeholder="Primary textarea"></textarea>