A shadcn/ui inspired Blazor component library

Installation

Add the Textarea component using the CLI:

shadcnblazor component add textarea

Textarea

The Textarea component provides a multi-line text input. Use Value and ValueChanged for two-way binding. Set Placeholder, Rows, and Disabled as needed.

1

2

3

4

5

<Textarea @bind-Value="_bio" Placeholder="Tell us about yourself..." Rows="4" />

@code {
    private string? _bio;
}

Examples

Rows

Use the Rows parameter to control the initial height of the textarea.

1

2

3

4

<div class="flex flex-col gap-4">
    <Textarea Placeholder="2 rows" Rows="2" />
    <Textarea Placeholder="6 rows" Rows="6" />
</div>

ComposableTextArea

The ComposableTextArea extends the textarea pattern with optional Header and Footer slots. Use it when you need to add toolbar buttons, hints, or actions above or below the input. It lives in the same folder as Textarea—shadcnblazor component add textarea adds both.

1

2

3

4

5

<ComposableTextArea @bind-Value="_text" Placeholder="Enter your message..." Rows="4" />

@code {
    private string? _text;
}

With Header and Footer

Use the Header and Footer render fragments to add content above and below the textarea.

Description

0 characters

1

2

3

4

5

6

7

8

9

10

11

12

<ComposableTextArea @bind-Value="_content" Rows="4">
    <Header>
        <span class="text-sm font-medium">Description</span>
    </Header>
    <Footer>
        <span class="text-xs text-muted-foreground">@(_content?.Length ?? 0) characters</span>
    </Footer>
</ComposableTextArea>

@code {
    private string? _content;
}

AI Chat input

The AI Chat sample uses ComposableTextArea for its input bar. The Header holds an "Add Context" button; the Footer has toggles (extended thinking, auto, sources) and a send button. The slots keep the input compact while exposing controls.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

<ComposableTextArea @bind-Value="@_prompt" Class="w-full" Rows="3" Placeholder="Write your prompt here...">
    <Header>
        <Button Size="@Size" Variant="@Variant.Outline" Class="text-xs text-muted-foreground">
            <LuAtSign Class="h-3 w-3"/>
            Add Context
        </Button>
    </Header>
    <Footer>
        <div class="flex items-center justify-between text-xs text-muted-foreground">
            <div class="flex gap-2">
                <ToggleButton @bind-IsToggled="@_extendedThinkingToggle" Size="@Size" VariantUntoggled="@Variant.Ghost" VariantToggled="@Variant.Default" Class="rounded-xl">
                    <LuBrain/>
                </ToggleButton>

                <Button Size="@Size" Variant="@Variant.Ghost" Class="font-medium text-muted-foreground">
                    <span>Auto</span>
                </Button>

                <Button Size="@Size" Variant="@Variant.Ghost" Class="font-medium text-muted-foreground">
                    <LuGlobe/>
                    <span>Sources</span>
                </Button>
            </div>

            <Button Size="@Size" Variant="@Variant.Default" Class="font-medium rounded-xl" OnClick="@(_ => OnSend(_prompt))">
                <LuArrowUp/>
            </Button>
        </div>
    </Footer>
</ComposableTextArea>

@code {
    [CascadingParameter(Name = nameof(Size))]
    public Size Size { get; set; } = Size.Md;
    
    private string _prompt = string.Empty;
    private bool _extendedThinkingToggle = true;

    private void OnSend(string _) { /* Handle send */ }
}

ComposableTextArea API

ComposableTextArea

Multi-line text input with optional header and footer slots.

Properties

Name	Type	Description
`AdditionalAttributes`	`Dictionary<string, Object>`
`Class`	`string`
`Disabled`	`bool`	Whether the text area is disabled.
`Footer`	`RenderFragment`	Optional footer content below the text area.
`FooterContainerClass`	`string`	CSS classes for the footer container.
`Header`	`RenderFragment`	Optional header content above the text area.
`HeaderContainerClass`	`string`	CSS classes for the header container.
`OnChange`	`EventCallback<ChangeEventArgs>`	Callback invoked when the input change event fires.
`Placeholder`	`string`	Placeholder text when the value is empty.
`Rows`	`int`	The number of visible text rows.
`Value`	`string`	The current value of the text area.
`ValueChanged`	`EventCallback<string>`	Callback invoked when the value changes.

Events

Name	Type	Description
`OnChange`	`EventCallback<ChangeEventArgs>`	Callback invoked when the input change event fires.
`ValueChanged`	`EventCallback<string>`	Callback invoked when the value changes.

Methods

Method	Returns	Description
`Equals`	`bool`
`GetHashCode`	`int`
`GetType`	`Type`
`SetParametersAsync`	`Task`
`ToString`	`string`

API Reference

Textarea

Multi-line text input for longer form content.

Properties

Name	Type	Description
`AdditionalAttributes`	`Dictionary<string, Object>`
`Class`	`string`
`Disabled`	`bool`	Whether the textarea is disabled.
`Placeholder`	`string`	Placeholder text when the value is empty.
`Rows`	`int`	The number of visible text rows.
`Value`	`string`	The current value of the textarea.
`ValueChanged`	`EventCallback<string>`	Callback invoked when the value changes.

Events

Name	Type	Description
`ValueChanged`	`EventCallback<string>`	Callback invoked when the value changes.

Methods

Method	Returns	Description
`Equals`	`bool`
`GetClass`	`string`	Returns the CSS classes for the textarea.
`GetHashCode`	`int`
`GetType`	`Type`
`SetParametersAsync`	`Task`
`ToString`	`string`

Mobile support for API reference coming soon.