Textarea | Bulma-Gomponents

Textarea

The b.Textarea constructor creates a text area.

Modifier	Action
`b.Rows(int)`	Set the text area height, in number of rows
`b.Hovered`	Apply the hovered style
`b.Focused`	Apply the focused style
`b.Loading`	Add a loading spinner to the right of the text area
`b.Disabled`	Disable the text area
`e.ReadOnly()`	Read only text area
`b.FixedSize`	Disable the text area resizing capability
`b.Primary`	Set color to primary
`b.Link`	Set color to link
`b.Info`	Set color to info
`b.Success`	Set color to success
`b.Warning`	Set color to warning
`b.Danger`	Set color to danger
`b.Small`	Set size to small
`b.Normal`	Set size to normal
`b.Medium`	Set size to medium
`b.Large`	Set size to large

Child	Action
`b.OnTextarea(...any)`	Apply children to the `<textarea>` element - only useful with the `b.Disabled` modifier if you want to apply the `is-disabled` class to the text area instead of using the `disabled` attribute

Bulma examples

Bulma documentation

Example

Code

b.Textarea(e.Placeholder("e.g. Hello world"))

ResultHTML

<textarea class="textarea" placeholder="e.g. Hello world"></textarea>

Example

Code

b.Textarea(e.Placeholder("10 lines of textarea"), b.Rows(10))

ResultHTML

<textarea class="textarea" placeholder="10 lines of textarea" rows="10"></textarea>

Colors

Bulma documentation

Example

Code

b.Textarea(b.Primary, e.Placeholder("Primary textarea"))

ResultHTML

<textarea class="textarea is-primary" placeholder="Primary textarea"></textarea>

Example

Code

b.Textarea(b.Link, e.Placeholder("Link textarea"))

ResultHTML

<textarea class="textarea is-link" placeholder="Link textarea"></textarea>

Example

Code

b.Textarea(b.Info, e.Placeholder("Info textarea"))

ResultHTML

<textarea class="textarea is-info" placeholder="Info textarea"></textarea>

Example

Code

b.Textarea(b.Success, e.Placeholder("Success textarea"))

ResultHTML

<textarea class="textarea is-success" placeholder="Success textarea"></textarea>

Example

Code

b.Textarea(b.Warning, e.Placeholder("Warning textarea"))

ResultHTML

<textarea class="textarea is-warning" placeholder="Warning textarea"></textarea>

Example

Code

b.Textarea(b.Danger, e.Placeholder("Danger textarea"))

ResultHTML

<textarea class="textarea is-danger" placeholder="Danger textarea"></textarea>

Sizes

Bulma documentation

Example

Code

b.Field(
	b.Control(
		b.Textarea(b.Small, e.Placeholder("Small textarea")),
	),
),
b.Field(
	b.Control(
		b.Textarea(e.Placeholder("Normal textarea")),
	),
),
b.Field(
	b.Control(
		b.Textarea(b.Medium, e.Placeholder("Medium textarea")),
	),
),
b.Field(
	b.Control(
		b.Textarea(b.Large, e.Placeholder("Large textarea")),
	),
)

ResultHTML

<div class="field"><div class="control"><textarea class="is-small textarea" placeholder="Small textarea"></textarea></div></div>
<div class="field"><div class="control"><textarea class="textarea" placeholder="Normal textarea"></textarea></div></div>
<div class="field"><div class="control"><textarea class="textarea is-medium" placeholder="Medium textarea"></textarea></div></div>
<div class="field"><div class="control"><textarea class="textarea is-large" placeholder="Large textarea"></textarea></div></div>

States

Bulma documentation

Example

Code

b.Control(
	b.Textarea(e.Placeholder("Normal textarea")),
)

ResultHTML

<div class="control"><textarea class="textarea" placeholder="Normal textarea"></textarea></div>

Example

Code

b.Control(
	b.Textarea(b.Hovered, e.Placeholder("Hovered textarea")),
)

ResultHTML

<div class="control"><textarea class="textarea is-hovered" placeholder="Hovered textarea"></textarea></div>

Example

Code

b.Control(
	b.Textarea(b.Focused, e.Placeholder("Focused textarea")),
)

ResultHTML

<div class="control"><textarea class="textarea is-focused" placeholder="Focused textarea"></textarea></div>

Example

Code

b.Control(
	b.Loading,
	b.Textarea(e.Placeholder("Loading textarea")),
)

ResultHTML

<div class="control is-loading"><textarea class="textarea" placeholder="Loading textarea"></textarea></div>

Example

Code

b.Field(
	b.Control(
		b.Small,
		b.Loading,
		b.Textarea(b.Small, e.Placeholder("Small loading textarea")),
	),
),
b.Field(
	b.Control(
		b.Loading,
		b.Textarea(e.Placeholder("Normal loading textarea")),
	),
),
b.Field(
	b.Control(
		b.Medium,
		b.Loading,
		b.Textarea(b.Medium, e.Placeholder("Medium loading textarea")),
	),
),
b.Field(
	b.Control(
		b.Large,
		b.Loading,
		b.Textarea(b.Large, e.Placeholder("Large loading textarea")),
	),
)

ResultHTML

<div class="field"><div class="control is-small is-loading"><textarea class="textarea is-small" placeholder="Small loading textarea"></textarea></div></div>
<div class="field"><div class="control is-loading"><textarea class="textarea" placeholder="Normal loading textarea"></textarea></div></div>
<div class="field"><div class="is-medium is-loading control"><textarea class="textarea is-medium" placeholder="Medium loading textarea"></textarea></div></div>
<div class="field"><div class="control is-large is-loading"><textarea class="textarea is-large" placeholder="Large loading textarea"></textarea></div></div>

Example

Code

b.Control(
	b.Textarea(e.Placeholder("Disabled textarea"), b.Disabled),
)

ResultHTML

<div class="control"><textarea class="textarea" placeholder="Disabled textarea" disabled></textarea></div>

Example

Code

b.Control(
	b.Textarea(e.ReadOnly(), "This content is readonly"),
)

ResultHTML

This content is readonly

<div class="control"><textarea class="textarea" readonly>This content is readonly</textarea></div>

Example

Code

b.Control(
	b.Textarea(b.FixedSize, e.Placeholder("Fixed size textarea")),
)

ResultHTML

<div class="control"><textarea class="textarea has-fixed-size" placeholder="Fixed size textarea"></textarea></div>