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 Storybook View in Playroom API Reference

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.

Facebook page(without URL)

<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.

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.

Cost

<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

API Reference