Form Label

A form label is a text element used to describe or provide a name for an input field or form element.

Overview

pie-form-label is a Web Component built using Lit. It offers a simple and accessible form label component for web applications.

This component can be easily integrated into various frontend frameworks and customised through a set of properties.

Installation

To install pie-form-label in your application, run the following on your command line:

npm i @justeattakeaway/pie-webc

yarn add @justeattakeaway/pie-webc

Props

Prop	Description	Default
for	The native `for` HTML attribute.	`undefined`
optional	Optional text to be placed next to the main label.	`undefined`
trailing	What the trailing text of the label component should be.	`undefined`

Slots

Slot	Description
`default`	The default, unnamed slot is used to pass in text to the component.

Events

This component does not emit any custom events. In order to add event listening to this component, you can treat it like a native HTML element in your application.

Examples

For HTML:

// import as module into a js file e.g. main.js
import '@justeattakeaway/pie-webc/components/form-label.js'

<!-- pass js file into <script> tag -->
<pie-form-label for="name-input" trailing="X of X">Name</pie-form-label>
<script type="module" src="/main.js"></script>

For Native JS Applications, Vue, Angular, Svelte etc.:

// Vue templates (using Nuxt 3)
import '@justeattakeaway/pie-webc/components/link.js';

<pie-form-label for="name-input" trailing="X of X">Name</pie-form-label>

For React Applications:

import { PieFormLabel } from '@justeattakeaway/pie-webc/react/form-label.js';

<PieFormLabel for="name-input" trailing="X of X">Name</PieFormLabel>