To affix a symbol before or after a field.
This is an isolated feature from Bootstrap Input Group.
Use Cases
.input-group** Bootstrap .input-group requires extra markup, which can make it cumbersome to combine React JSX components without the components having “external knowledge”.
Known Bugs
s-affixed-input-wrapper__suffix overlaps with browser controls e.g.<input type="number"> arrows<input type="date"> calendar<input type="time"> clock
<dl>
<dt>Prepend</dt>
<dl>
<dt>Auto-Width Input</dt>
<dd>
<div class="
s-affixed-input-wrapper s-affixed-input-wrapper--prepend
">
<label for="text-to-copy-prepend">Text to Copy</label>
<button class="s-affixed-input-wrapper__prepend c-button c-button--size-small" data-copy-target="text-to-copy-prepend">
Copy
</button>
<input id="text-to-copy-prepend" name="text-prepend" />
</div>
</dd>
<dt>Static-Width Input</dt>
<dd class="demo-static-width">
<div class="
s-affixed-input-wrapper s-affixed-input-wrapper--prepend
">
<label for="text-to-copy-prepend">Text to Copy</label>
<button class="s-affixed-input-wrapper__prepend c-button c-button--size-small" data-copy-target="text-to-copy-prepend">
Copy
</button>
<input id="text-to-copy-prepend" name="text-prepend" />
</div>
</dd>
<dt>Full-Width Input</dt>
<dd>
<div class="
s-affixed-input-wrapper s-affixed-input-wrapper--prepend
s-affixed-input-wrapper--full-width
">
<label for="text-to-copy-prepend">Text to Copy</label>
<button class="s-affixed-input-wrapper__prepend c-button c-button--size-small" data-copy-target="text-to-copy-prepend">
Copy
</button>
<input id="text-to-copy-prepend" name="text-prepend" />
</div>
</dd>
</dl>
<dt>Append</dt>
<dl>
<dt>Auto-Width Input</dt>
<dd>
<div class="
s-affixed-input-wrapper s-affixed-input-wrapper--append
">
<label for="text-to-copy-append">Text to Copy</label>
<button class="s-affixed-input-wrapper__append c-button c-button--size-small" data-copy-target="text-to-copy-append">
Copy
</button>
<input id="text-to-copy-append" name="text-append" />
</div>
</dd>
<dt>Static-Width Input</dt>
<dd class="demo-static-width">
<div class="
s-affixed-input-wrapper s-affixed-input-wrapper--append
">
<label for="text-to-copy-append">Text to Copy</label>
<button class="s-affixed-input-wrapper__append c-button c-button--size-small" data-copy-target="text-to-copy-append">
Copy
</button>
<input id="text-to-copy-append" name="text-append" />
</div>
</dd>
<dt>Full-Width Input</dt>
<dd>
<div class="
s-affixed-input-wrapper s-affixed-input-wrapper--append
s-affixed-input-wrapper--full-width
">
<label for="text-to-copy-append">Text to Copy</label>
<button class="s-affixed-input-wrapper__append c-button c-button--size-small" data-copy-target="text-to-copy-append">
Copy
</button>
<input id="text-to-copy-append" name="text-append" />
</div>
</dd>
</dl>
</dl>
<script>
const copyButtons = document.querySelectorAll('[data-copy-target]');
[...copyButtons].forEach(button => button.addEventListener('click', event => {
const textFieldId = event.srcElement.dataset.copyTarget
const textField = document.getElementById(textFieldId);
const text = textField.value;
navigator.clipboard.writeText(text);
}));
</script>
/* This CSS is ONLY for the pattern library. It is NOT part of the pattern. */
.demo-static-width input {
width: 25ch;
}
{
"shouldSkipPattern": true,
"globalStyles": [
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.demo.css"
},
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.base.css"
}
],
"cmsStyles": [
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.cms.css"
}
],
"docsStyles": [
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.docs.css"
}
],
"portalStyles": [
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.portal.css"
}
],
"subdir": "trumps",
"shouldLoadCMS": true,
"📝 shouldLoadBootstrap": "temporary dependence, until proven to work on Portal"
}