Affixes: prefix and suffix props

All the base inputs (Form.Text, Form.Select, Form.Email, Form.Number etc...) sport the ability to display affixes.

Fill in their prefix or suffix prop and the deed is done.

Form.Textarea and "on/off" inputs (Radio, Checkbox etc...) are not compatible with affixes.

Zoning

Style

Variations

TL;DR

Affixes are either prefix or suffix. They are one of the following types:

Both prefix and affix accept the same 3 kinds of objects.

Select affixes

Button affixes

Text affixes

Datalist and multiple select

Form.Datalist and multiple selects also works with the same ruleset.

Mix and match

An input can mix multiple types of affixes indiscriminately.

States

Interactive affixes (button and select) have the states related to their type:

AffixSelect and AffixButton can

• Have the hover state
• Have the active state
• have the disabled state

They are not allowed the read-only state since a read-only <select> is actually a regular read-only text input, and a read-only button makes no sense.

Content

Use lower case on prefix and suffix except if it's an interactive element.

Interactions

Usage

Use with RHF

Here's an example using a select type affix with React Hooks Form

Accessibility

• Text is mandatory, even when hidden as it is parsed by screen-readers.