ClickableAdornment

In order to provide more context as to what value an input expects to receive, sometimes it is helpful to use an adornment.

Adornments can be used as either a prefix or a suffix for the entered value. When an adornment is placed inside an input, clicking on a ClickableAdornment will focus the corresponding input.

View in StorybookView in Playroom

Quick Start

Installation
npm install @adaptavant/eds-core
Import
import { ClickableAdornment } from '@adaptavant/eds-core';

Basic example​

In order to make adornments as flexible as possible, we do not currently provide any default padding, leaving it up to the consumer to decide the appropriate amount.

​
<Field label="Facebook page" secondaryLabel="(without URL)" size="large">
  <TextInput
    adornmentStart={
      <ClickableAdornment
        className={`
          -me-1.5
          ps-2
        `}
      >
        https://facebook.com/
      </ClickableAdornment>
    }
    defaultValue="AnywhereWorks"
  />
</Field>
View in Playroom

We may address this in the future once we have a better understanding of how adornments get used in real-world scenarios.

Screen reader support​

By default, ClickableAdornment renders a <span> with aria-hidden="true". This means it is only accessible to sighted users, as spans do not receive keyboard focus unless explicitly given a tabIndex, and aria-hidden="true" opts the element out of being announced.

Ensure that ClickableAdornment contains only supplementary information. If there is critical information within the adornment that non-sighted users need to know, it's generally best to place that in a visually hidden element inside the label.

​
<Field
  label={
    <>
      Cost<span className="sr-only"> in US dollars</span>
    </>
  }
  size="large"
>
  <TextInput
    adornmentStart={
      <ClickableAdornment
        className={`
          -me-1.5
          ps-2
        `}
      >
        $
      </ClickableAdornment>
    }
    defaultValue="0"
  />
</Field>
View in Playroom

Style API​

Our design system components include style props that allow you to easily customize different parts of each component to match your design needs.

Please refer to the Style API documentation for more insights.