InputGroup
A field with addons — text, icons, buttons, selects — joined into one block.
Text
Text on one or both sides.
12 lines
<div class="stack"> <tx-input-group> <tx-input-group-addon>https://</tx-input-group-addon> <input txInput placeholder="site" aria-label="Site" /> <tx-input-group-addon>.com</tx-input-group-addon> </tx-input-group> <tx-input-group> <tx-input-group-addon>$</tx-input-group-addon> <tx-input-number placeholder="Price" ariaLabel="Price" [maxFractionDigits]="0" /> <tx-input-group-addon>.00</tx-input-group-addon> </tx-input-group></div>Icons
Icons as addons.
5 lines
<tx-input-group> <tx-input-group-addon><tx-icon [name]="'user'" /></tx-input-group-addon> <input txInput placeholder="Username" aria-label="Username" /> <tx-input-group-addon><tx-icon [name]="'at'" /></tx-input-group-addon></tx-input-group>Buttons
Buttons on either side — a search button, a quantity stepper.
32 lines
<div class="stack"> <tx-input-group> <input txInput placeholder="Keyword" aria-label="Keyword" [formControl]="keyword" /> <button txButton [icon]="'search'" aria-label="Search" (click)="search()"></button> </tx-input-group> <span class="hint">Searched: {{ searched || '—' }}</span> <tx-input-group> <button txButton [severity]="'secondary'" [icon]="'minus'" aria-label="Less" [disabled]="quantity.value <= min" (click)="step(-1)" ></button> <input txInput [txKeyFilter]="'pint'" aria-label="Quantity" [formControl]="quantity" (blur)="clamp()" /> <button txButton [severity]="'secondary'" [icon]="'plus'" aria-label="More" [disabled]="quantity.value >= max" (click)="step(1)" ></button> </tx-input-group></div>Select
A select as an addon.
9 lines
<tx-input-group [fluid]="true" class="group"> <tx-select class="group__select" [options]="protocols" [formControl]="protocol" [ariaLabel]="'Protocol'" /> <input txInput placeholder="example.com" aria-label="Domain" /></tx-input-group>Fluid
Full width with fluid or <tx-fluid>.
5 lines
<tx-input-group [fluid]="true"> <tx-input-group-addon>@</tx-input-group-addon> <input txInput placeholder="Invite by email" aria-label="Invite by email" /> <button txButton [icon]="'send'">Invite</button></tx-input-group>