Skip to main content
All components

ComponentTextarea

16 of 16 upstream examples match. Razor component: <NhsukTextarea>

Hide the 1 test-only examples

Default

Matches upstream

Open on its own page (opens in new tab)

Do not include personal information like your name, date of birth or NHS number
Razor Pages and MVC 
<nhsuk-textarea
    label-options="@(new LabelOptions
    {
        Heading = "Can you provide more detail?",
        Size = "l",
    })"
    hint="Do not include personal information like your name, date of birth or NHS number"
    name="example"
/>
Blazor 
<NhsukTextarea
    Label="@(new LabelOptions
    {
        Heading = "Can you provide more detail?",
        Size = "l",
    })"
    Hint="@(new HintOptions
    {
        Text = "Do not include personal information like your name, date of birth or NHS number",
    })"
    Name="example"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/textarea/macro.njk" import textarea %}

{{ textarea({
  "label": {
    "heading": "Can you provide more detail?",
    "size": "l"
  },
  "hint": {
    "text": "Do not include personal information like your name, date of birth or NHS number"
  },
  "name": "example"
}) }}

Disabled

Matches upstream

Open on its own page (opens in new tab)

Do not include personal information like your name, date of birth or NHS number
Razor Pages and MVC 
<nhsuk-textarea
    label-options="@(new LabelOptions
    {
        Heading = "Can you provide more detail?",
        Size = "l",
    })"
    hint="Do not include personal information like your name, date of birth or NHS number"
    name="example"
    disabled="true"
/>
Blazor 
<NhsukTextarea
    Label="@(new LabelOptions
    {
        Heading = "Can you provide more detail?",
        Size = "l",
    })"
    Hint="@(new HintOptions
    {
        Text = "Do not include personal information like your name, date of birth or NHS number",
    })"
    Name="example"
    Disabled="true"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/textarea/macro.njk" import textarea %}

{{ textarea({
  "label": {
    "heading": "Can you provide more detail?",
    "size": "l"
  },
  "hint": {
    "text": "Do not include personal information like your name, date of birth or NHS number"
  },
  "name": "example",
  "disabled": true
}) }}

Label

Matches upstream

with size S

Open on its own page (opens in new tab)

Do not include personal information like your name, date of birth or NHS number
Razor Pages and MVC 
<nhsuk-textarea
    label-options="@(new LabelOptions
    {
        Heading = "Can you provide more detail?",
        Size = "s",
    })"
    hint="Do not include personal information like your name, date of birth or NHS number"
    id="custom-size"
    name="example"
/>
Blazor 
<NhsukTextarea
    Label="@(new LabelOptions
    {
        Heading = "Can you provide more detail?",
        Size = "s",
    })"
    Hint="@(new HintOptions
    {
        Text = "Do not include personal information like your name, date of birth or NHS number",
    })"
    Id="custom-size"
    Name="example"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/textarea/macro.njk" import textarea %}

{{ textarea({
  "label": {
    "heading": "Can you provide more detail?",
    "size": "s"
  },
  "hint": {
    "text": "Do not include personal information like your name, date of birth or NHS number"
  },
  "id": "custom-size",
  "name": "example"
}) }}

Label

Matches upstream

with size M

Open on its own page (opens in new tab)

Do not include personal information like your name, date of birth or NHS number
Razor Pages and MVC 
<nhsuk-textarea
    label-options="@(new LabelOptions
    {
        Heading = "Can you provide more detail?",
        Size = "m",
    })"
    hint="Do not include personal information like your name, date of birth or NHS number"
    id="custom-size"
    name="example"
/>
Blazor 
<NhsukTextarea
    Label="@(new LabelOptions
    {
        Heading = "Can you provide more detail?",
        Size = "m",
    })"
    Hint="@(new HintOptions
    {
        Text = "Do not include personal information like your name, date of birth or NHS number",
    })"
    Id="custom-size"
    Name="example"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/textarea/macro.njk" import textarea %}

{{ textarea({
  "label": {
    "heading": "Can you provide more detail?",
    "size": "m"
  },
  "hint": {
    "text": "Do not include personal information like your name, date of birth or NHS number"
  },
  "id": "custom-size",
  "name": "example"
}) }}

Label

Matches upstream

with size L

Open on its own page (opens in new tab)

Do not include personal information like your name, date of birth or NHS number
Razor Pages and MVC 
<nhsuk-textarea
    label-options="@(new LabelOptions
    {
        Heading = "Can you provide more detail?",
        Size = "l",
    })"
    hint="Do not include personal information like your name, date of birth or NHS number"
    id="custom-size"
    name="example"
/>
Blazor 
<NhsukTextarea
    Label="@(new LabelOptions
    {
        Heading = "Can you provide more detail?",
        Size = "l",
    })"
    Hint="@(new HintOptions
    {
        Text = "Do not include personal information like your name, date of birth or NHS number",
    })"
    Id="custom-size"
    Name="example"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/textarea/macro.njk" import textarea %}

{{ textarea({
  "label": {
    "heading": "Can you provide more detail?",
    "size": "l"
  },
  "hint": {
    "text": "Do not include personal information like your name, date of birth or NHS number"
  },
  "id": "custom-size",
  "name": "example"
}) }}

Label

Matches upstream

with size XL

Open on its own page (opens in new tab)

Do not include personal information like your name, date of birth or NHS number
Razor Pages and MVC 
<nhsuk-textarea
    label-options="@(new LabelOptions
    {
        Heading = "Can you provide more detail?",
        Size = "xl",
    })"
    hint="Do not include personal information like your name, date of birth or NHS number"
    id="custom-size"
    name="example"
/>
Blazor 
<NhsukTextarea
    Label="@(new LabelOptions
    {
        Heading = "Can you provide more detail?",
        Size = "xl",
    })"
    Hint="@(new HintOptions
    {
        Text = "Do not include personal information like your name, date of birth or NHS number",
    })"
    Id="custom-size"
    Name="example"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/textarea/macro.njk" import textarea %}

{{ textarea({
  "label": {
    "heading": "Can you provide more detail?",
    "size": "xl"
  },
  "hint": {
    "text": "Do not include personal information like your name, date of birth or NHS number"
  },
  "id": "custom-size",
  "name": "example"
}) }}

Label

Matches upstream

with id attribute on

Open on its own page (opens in new tab)

Do not include personal information like your name, date of birth or NHS number
Razor Pages and MVC 
<nhsuk-textarea
    label-options="@(new LabelOptions
    {
        Heading = "Can you provide more detail?",
        Size = "l",
        Id = "custom-id",
    })"
    hint="Do not include personal information like your name, date of birth or NHS number"
    id="custom-size"
    name="example"
/>
Blazor 
<NhsukTextarea
    Label="@(new LabelOptions
    {
        Heading = "Can you provide more detail?",
        Size = "l",
        Id = "custom-id",
    })"
    Hint="@(new HintOptions
    {
        Text = "Do not include personal information like your name, date of birth or NHS number",
    })"
    Id="custom-size"
    Name="example"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/textarea/macro.njk" import textarea %}

{{ textarea({
  "label": {
    "heading": "Can you provide more detail?",
    "size": "l",
    "id": "custom-id"
  },
  "hint": {
    "text": "Do not include personal information like your name, date of birth or NHS number"
  },
  "id": "custom-size",
  "name": "example"
}) }}

With autocomplete attribute

Matches upstream

Open on its own page (opens in new tab)

Razor Pages and MVC 
<nhsuk-textarea
    label-options="@(new LabelOptions
    {
        Heading = "Full address",
        Size = "l",
    })"
    id="with-autocomplete-attribute"
    name="example"
    autocomplete="street-address"
/>
Blazor 
<NhsukTextarea
    Label="@(new LabelOptions
    {
        Heading = "Full address",
        Size = "l",
    })"
    Id="with-autocomplete-attribute"
    Name="example"
    Autocomplete="street-address"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/textarea/macro.njk" import textarea %}

{{ textarea({
  "label": {
    "heading": "Full address",
    "size": "l"
  },
  "id": "with-autocomplete-attribute",
  "name": "example",
  "autocomplete": "street-address"
}) }}

With error message

Matches upstream

Open on its own page (opens in new tab)

Error: You must provide an explanation
Razor Pages and MVC 
<nhsuk-textarea
    label-options="@(new LabelOptions
    {
        Heading = "Can you provide more detail?",
        Size = "l",
    })"
    error-message="You must provide an explanation"
    id="with-error-message"
    name="example"
/>
Blazor 
<NhsukTextarea
    Label="@(new LabelOptions
    {
        Heading = "Can you provide more detail?",
        Size = "l",
    })"
    ErrorMessage="@(new ErrorMessageOptions
    {
        Text = "You must provide an explanation",
    })"
    Id="with-error-message"
    Name="example"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/textarea/macro.njk" import textarea %}

{{ textarea({
  "label": {
    "heading": "Can you provide more detail?",
    "size": "l"
  },
  "errorMessage": {
    "text": "You must provide an explanation"
  },
  "id": "with-error-message",
  "name": "example"
}) }}

With error message and hint

Matches upstream

Open on its own page (opens in new tab)

Do not include personal information like your name, date of birth or NHS number
Error: You must provide an explanation
Razor Pages and MVC 
<nhsuk-textarea
    label-options="@(new LabelOptions
    {
        Heading = "Can you provide more detail?",
        Size = "l",
    })"
    hint="Do not include personal information like your name, date of birth or NHS number"
    error-message="You must provide an explanation"
    id="with-hint-error"
    name="example"
/>
Blazor 
<NhsukTextarea
    Label="@(new LabelOptions
    {
        Heading = "Can you provide more detail?",
        Size = "l",
    })"
    Hint="@(new HintOptions
    {
        Text = "Do not include personal information like your name, date of birth or NHS number",
    })"
    ErrorMessage="@(new ErrorMessageOptions
    {
        Text = "You must provide an explanation",
    })"
    Id="with-hint-error"
    Name="example"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/textarea/macro.njk" import textarea %}

{{ textarea({
  "label": {
    "heading": "Can you provide more detail?",
    "size": "l"
  },
  "hint": {
    "text": "Do not include personal information like your name, date of birth or NHS number"
  },
  "errorMessage": {
    "text": "You must provide an explanation"
  },
  "id": "with-hint-error",
  "name": "example"
}) }}

With error message and hint as strings

Matches upstream

Open on its own page (opens in new tab)

Do not include personal information like your name, date of birth or NHS number
Error: You must provide an explanation
Razor Pages and MVC 
<nhsuk-textarea
    label-options="@(new LabelOptions
    {
        Heading = "Can you provide more detail?",
        Size = "l",
    })"
    hint="Do not include personal information like your name, date of birth or NHS number"
    error-message="You must provide an explanation"
    id="with-hint-error"
    name="example"
/>
Blazor 
<NhsukTextarea
    Label="@(new LabelOptions
    {
        Heading = "Can you provide more detail?",
        Size = "l",
    })"
    Hint="@("Do not include personal information like your name, date of birth or NHS number")"
    ErrorMessage="@("You must provide an explanation")"
    Id="with-hint-error"
    Name="example"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/textarea/macro.njk" import textarea %}

{{ textarea({
  "label": {
    "heading": "Can you provide more detail?",
    "size": "l"
  },
  "hint": "Do not include personal information like your name, date of birth or NHS number",
  "errorMessage": "You must provide an explanation",
  "id": "with-hint-error",
  "name": "example"
}) }}

With error message and hint, without heading

Matches upstream

Open on its own page (opens in new tab)

Do not include personal information like your name, date of birth or NHS number
Error: You must provide an explanation
Razor Pages and MVC 
<nhsuk-textarea
    label="Can you provide more detail?"
    hint="Do not include personal information like your name, date of birth or NHS number"
    error-message="You must provide an explanation"
    id="with-hint-error"
    name="example"
/>
Blazor 
<NhsukTextarea
    Label="@(new LabelOptions
    {
        Text = "Can you provide more detail?",
    })"
    Hint="@(new HintOptions
    {
        Text = "Do not include personal information like your name, date of birth or NHS number",
    })"
    ErrorMessage="@(new ErrorMessageOptions
    {
        Text = "You must provide an explanation",
    })"
    Id="with-hint-error"
    Name="example"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/textarea/macro.njk" import textarea %}

{{ textarea({
  "label": {
    "text": "Can you provide more detail?"
  },
  "hint": {
    "text": "Do not include personal information like your name, date of birth or NHS number"
  },
  "errorMessage": {
    "text": "You must provide an explanation"
  },
  "id": "with-hint-error",
  "name": "example"
}) }}

With error message, without heading

Matches upstream

Open on its own page (opens in new tab)

Error: You must provide an explanation
Razor Pages and MVC 
<nhsuk-textarea
    label="Can you provide more detail?"
    error-message="You must provide an explanation"
    id="with-error-message"
    name="example"
/>
Blazor 
<NhsukTextarea
    Label="@(new LabelOptions
    {
        Text = "Can you provide more detail?",
    })"
    ErrorMessage="@(new ErrorMessageOptions
    {
        Text = "You must provide an explanation",
    })"
    Id="with-error-message"
    Name="example"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/textarea/macro.njk" import textarea %}

{{ textarea({
  "label": {
    "text": "Can you provide more detail?"
  },
  "errorMessage": {
    "text": "You must provide an explanation"
  },
  "id": "with-error-message",
  "name": "example"
}) }}

With error only

Matches upstream

Open on its own page (opens in new tab)

Razor Pages and MVC 
<nhsuk-textarea
    label-options="@(new LabelOptions
    {
        Heading = "Can you provide more detail?",
        Size = "l",
    })"
    error-message-options="@(true)"
    id="with-error-only"
    name="example"
/>
Blazor 
<NhsukTextarea
    Label="@(new LabelOptions
    {
        Heading = "Can you provide more detail?",
        Size = "l",
    })"
    ErrorMessage="@(true)"
    Id="with-error-only"
    Name="example"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/textarea/macro.njk" import textarea %}

{{ textarea({
  "label": {
    "heading": "Can you provide more detail?",
    "size": "l"
  },
  "errorMessage": true,
  "id": "with-error-only",
  "name": "example"
}) }}

With hint

Matches upstream

Open on its own page (opens in new tab)

Do not include personal information like your name, date of birth or NHS number
Razor Pages and MVC 
<nhsuk-textarea
    label-options="@(new LabelOptions
    {
        Heading = "Can you provide more detail?",
        Size = "l",
    })"
    hint="Do not include personal information like your name, date of birth or NHS number"
    id="with-hint"
    name="example"
/>
Blazor 
<NhsukTextarea
    Label="@(new LabelOptions
    {
        Heading = "Can you provide more detail?",
        Size = "l",
    })"
    Hint="@(new HintOptions
    {
        Text = "Do not include personal information like your name, date of birth or NHS number",
    })"
    Id="with-hint"
    Name="example"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/textarea/macro.njk" import textarea %}

{{ textarea({
  "label": {
    "heading": "Can you provide more detail?",
    "size": "l"
  },
  "hint": {
    "text": "Do not include personal information like your name, date of birth or NHS number"
  },
  "id": "with-hint",
  "name": "example"
}) }}

Without heading

Matches upstream

Open on its own page (opens in new tab)

Do not include personal information like your name, date of birth or NHS number
Razor Pages and MVC 
<nhsuk-textarea
    label="Can you provide more detail?"
    hint="Do not include personal information like your name, date of birth or NHS number"
    id="without-heading"
    name="example"
/>
Blazor 
<NhsukTextarea
    Label="@("Can you provide more detail?")"
    Hint="@("Do not include personal information like your name, date of birth or NHS number")"
    Id="without-heading"
    Name="example"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/textarea/macro.njk" import textarea %}

{{ textarea({
  "label": "Can you provide more detail?",
  "hint": "Do not include personal information like your name, date of birth or NHS number",
  "id": "without-heading",
  "name": "example"
}) }}