Data input

Input group

Themed input with prefix and suffix addons such as icons, units, or buttons.

Import

Add the symbol to your component's imports array. The walkthrough below shows the most common usages — copy & tweak.

import { KjInputGroupComponent } from '@kouji-ui/components';

Loading editor

Playground

#playground

.00

orientation

prefix

suffix

placeholder

disabled

<kj-input-group
  kjOrientation="horizontal"
>
  <kj-input-group-addon>$</kj-input-group-addon>
  <kj-input type="text" placeholder="Amount" />
  <kj-input-group-addon>.00</kj-input-group-addon>
</kj-input-group>