Assistive Text

Provides users with extra context, guidance, or validation to ensure accurate input.

Overview

pie-assistive-text is a Web Component built using Lit.

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

Installation

To install pie-assistive-text in your application, run the following on your command line:

npm i @justeattakeaway/pie-webc

yarn add @justeattakeaway/pie-webc

Peer Dependencies

When using pie-assistive-text, you will also need to include a couple of dependencies to ensure the component renders as expected. See the PIE Wiki for more information and how to include these in your application.

Props

Prop	Options	Description	Default
variant	`"default"` `"error"` `"success"`	Sets the type of message displayed to one of three potential options: `error`, `success` or `default`. `error` and `success` include an icon and are used for validation messages. `default` provides users with extra context and guidance.	`default`
isVisuallyHidden	`true` `false`	If true, hides the component visually but leaves it accessible for a11y technologies.	`false`

Slots

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

Importing and usage in templates

For Native JS Applications:

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

<!-- pass js file into <script> tag -->
<pie-assistive-text variant="success">Your request has been submitted.</pie-assistive-text>
<script type="module" src="/main.js"></script>

For Vue Applications:

// import as module into a js file that will be loaded on the page where the component is used.
import '@justeattakeaway/pie-webc/components/assistive-text.js';

<pie-assistive-text
  variant="success">
  Your request has been submitted.
</pie-assistive-text>

For React Applications:

import { PieAssistiveText } from '@justeattakeaway/pie-webc/react/assistive-text.js';

<PieAssistiveText
  variant="success">
  Your request has been submitted.
</PieAssistiveText>

// React templates (using Next 13 and SSR)
import { PieAssistiveText } from '@justeattakeaway/pie-assistive-text/dist/react';

<PieAssistiveText
  variant="success">
  Your request has been submitted.
</PieAssistiveText>