Label

As a wrapper around the native <label> element, the <Label> component provides styles that work with Stash's form components. In addition, it includes some extra features, such as the ability to indicate if a field is optional or required.

Figma

Basic Usage

Typically, using the label prop on the Field component is good enough. However, you can use the <Label> component directly if Field's label prop is not good enough, such as when custom styling or content is required:

Full Name

Username

<Field label="Full Name">
  <Input v-model="fullName" name="full_name" />
</Field>
<Field>
  <Label>
    Username
  </Label>
  <Input v-model="username" name="username" />
</Field>

Required

Adds styling to indicate that the field is required.

Name *

<Label is-required>Name</Label>

Optional

Adds styling to indicate that the field is optional.

Name (optional)

<Label show-optional>Name</Label>

Error

Adds an animation to indicate that the field has an error.

Name

<Label has-error>Name</Label>

API

See the documentation below for a complete reference to all the props and classes available to the components mentioned here.

• Label