Share via

Text Area

  • Article

An implementation of an HTML textarea element as a form-connected web-component. The fluent-text-area supports two visual appearances, outline and filled, with the control defaulting to the outline appearance.

fluent-text-area

Setup

import {
    provideFluentDesignSystem,
    fluentTextArea
} from "@fluentui/web-components";

provideFluentDesignSystem()
    .register(
        fluentTextArea()
    );

Example

FluentTextArea

<FluentArea> wraps the <fluent-text-area> element, a web component implementation of a text area composition leveraging the Fluent UI design system.

Usage

@using Microsoft.Fast.Components.FluentUI
<h4>Default</h4>
<FluentTextArea></FluentTextArea>

<h4>With label</h4>
<FluentTextArea>
    <span>label</span>
</FluentTextArea>

<h4>Full Width</h4>
<FluentTextArea style="width: 100%;"></FluentTextArea>

<h4>Placeholder</h4>
<FluentTextArea Placeholder="Placeholder"></FluentTextArea>

<h4>Required</h4>
<FluentTextArea Required="true"></FluentTextArea>

<!-- Disabled -->
<h4>Disabled</h4>
<FluentTextArea Disabled="true"></FluentTextArea>

<!-- Read only -->
<h4>Read only</h4>
<FluentTextArea Readonly="true" Value="Readonly text area"></FluentTextArea>

Example

See the component in action with implementation examples at the Blazor demo site.