Affix

Joins a control with what belongs beside it, a unit, a symbol, a button, or another control, into one thing with a shared border and height.

Example

<div class="field">
    <label for="price">Price</label>
    <div class="affix">
        <span id="price-unit">$</span>
        <input id="price" type="number" min="0" step="0.01" aria-describedby="price-unit">
        <button class="button" type="button" data-emphasis="medium">Apply</button>
    </div>
</div>

When to use it

A price with its currency, a distance with its unit, a search box with its button, a URL with a fixed domain after it, a country code beside a phone number. Whatever is joined shares one border and one height, so the parts read as one thing.

How it works

A flex row. Every control grows; a span becomes a labelled box on the sunken surface; a button keeps its own colours. Inner corners are squared and each border overlaps the next by one width, so the seam is a single line. The group sets no size of its own: it reads the field around it, so data-size on the field scales the whole row.

<div class="field" data-size="lg">
    <label for="site">Site</label>
    <div class="affix">
        <input id="site" type="text" aria-describedby="site-domain">
        <span id="site-domain">.foundationcss.com</span>
    </div>
</div>

Accessibility

The prefix is not part of the control, so a screen reader will not read it with the value unless you connect them: give the span an id and put it in the control's aria-describedby, or include the unit in the label ("Price in dollars"). The field's label still points at one control with for; when the affix joins two controls, the other one needs its own aria-label.

<div class="field">
    <label for="phone">Phone</label>
    <div class="affix">
        <select aria-label="Country code"><option>+1</option><option>+44</option></select>
        <input id="phone" type="tel">
    </div>
</div>

Attributes

None. This is configured through its children and tokens only.

Children

• > *: at least 2. The controls and their attachments, in visual order.
• > input: any number. A control; every control grows to share the row.
• > select: any number. A control; every control grows to share the row.
• > span: 0 to 2. A text prefix or suffix.
• > .button: 0 to 2. A button prefix or suffix.

Tokens

Accessibility

• A prefix or suffix that carries meaning (a currency, a unit) must reach the control's accessible name or description: give the span an id and add it to the control's aria-describedby, or say it in the label. When the affix holds more than one control, the field's label names one of them and each other control needs its own aria-label. A button in the affix is an ordinary button. Usually the affix is the control slot of a field.

Browser support

• Used without guards: flexbox, logical border radii
• Behind @supports: nothing

JavaScript

None. This component is CSS only.

Available since 7.0.0.