Skip to main content

Area

The Area control presents a multi-line input field used for editing texts of significant size. Area can be provided with a placeholder, a value and a label. It is also possible to initialize a disabled area or apply error styling for it, whenever you need it.

Textarea

Initialization​

To create a Area instance on a page, you need to complete the following steps:

  • import the source file of the control on a page:
App.svelte
<script>
    import { Area } from "wx-svelte-core";
</script>
  • use the <Area> tag to initialize the control:
App.svelte
<Area/>

A default area is initialized empty without a label or a placeholder.

Setting the value​

On initialization an area doesn't have any value set. You can specify the text that should be rendered in a area through the value API property, for example:

<Area value={"Lorem ipsum dolor sit amet, consectetur adipiscing elit."}

If a text is too long, a scroll appears in the area. You can also use the resizer in the bottom right corner to enlarge a area. Check the image below:

Textarea resizer

Related sample: Textarea

Getting the current value​

You can get the current value of the Area control. For this, you need to:

  • declare a variable that will contain the input's value (it may contain the initial value):
<script>
    import { Area } from "wx-svelte-core";

    let text1 = "Nice to meet you";
</script>
  • bind the variable to the value property of the control:
<Area bind:value={text1} />

If the name of the variable matches its value, you can use the shorthand while binding the property: 

<script>
    import { Area } from "wx-svelte-core";

    let value = "Anna";
</script>

<Area bind:value />

After that the value assigned to the bound variable will be updated on each change of the value in the input.

Related sample: Textarea

Adding a placeholder for the input​

You can add a placeholder inside the input of Area. The placeholder can contain some prompting message to make interaction with the control simpler. All you need is to set your message as a value of the placeholder property:

<Area placeholder="Type here"/>

Related sample: Textarea

Setting the disabled state​

You can disable a Area input with the help of the disabled property.

<Area disabled={true}/>

It is also possible to set an Area to the disabled state by declaring the property with no value:

<Area disabled /> <!-- equals to <Area disabled={true} /> -->

Disabled Textarea

Related sample: Textarea

Adding a label​

A default area has no label. To provide a label for an area control, you can use the Field component and complete several steps:

  • include the Field source file on a page, declare the <Field> tag and fill it with the necessary props:
    • add a desired label via the label property
    • optionally, set the position="left" property to place the label to the left of the area input
    • specify the id variable to bind the field and area controls
<script>
    import { Area, Field } from "wx-svelte-core";
</script>

<Field label="Details" position="left" let:id>

Then wrap the area in question in the <Field> tags and specify the id property into the area control to link the controls:

<Field label="Details" position="left" let:id>
    <Area placeholder="Type here" {id} />
</Field>

Textarea with a side label

Related sample: Textarea

Adding a title​

A title is a tooltip text that appears on hovering the mouse cursor over the input and may contain some extra information about the control. Use the title property to add a tooltip for an area:

<Area title="It can't be empty" />

Textarea with a title

Related sample: Textarea

Styling a validation error​

When you use an area input inside a form and a wrong value is passed to the control, you can use error styling to show that validation has failed. Once you've set the error property to true (or just specified the property without a value): 

<Area error={true}/> <!-- equals to <Area error/> -->

the input's border and the text's value become red. To make the label red as well, use the error property of the Field control.

<Field label="Error" error let:id>
    <Area error={true} {id}/>
</Field>

Textarea error style

Related sample: Textarea