<form
class="input-wrapper"
[formGroup]="form"
>
<div
tuiGroup
class="group"
>
<div>
<tui-textfield [style.border-radius]="'inherit'">
<input
formControlName="value"
placeholder="House"
tuiInput
/>
<label tuiLabel>House</label>
<tui-icon tuiTooltip="Write a number" />
</tui-textfield>
<tui-error formControlName="value" />
</div>
<div>
<tui-textfield
multi
tuiChevron
[rows]="1"
[style.border-radius]="'inherit'"
[tuiTextfieldCleaner]="false"
>
<input
formControlName="multi"
placeholder="Building"
tuiInputChip
/>
<tui-input-chip *tuiItem />
<tui-data-list-wrapper
*tuiDropdown
tuiMultiSelectGroup
[items]="items"
/>
<tui-icon tuiTooltip="Write house building" />
</tui-textfield>
<tui-error formControlName="multi" />
</div>
<div>
<tui-textfield [style.border-radius]="'inherit'">
<input
formControlName="number"
placeholder="Apartment number"
tuiInput
/>
<label tuiLabel>Apartment</label>
<tui-icon tuiTooltip="Write an apartment number only" />
</tui-textfield>
<tui-error formControlName="number" />
</div>
</div>
</form>
.group {
max-inline-size: 30.25rem;
}
<div
tuiGroup
class="group"
[collapsed]="true"
>
<button
appearance="outline"
tuiButton
type="button"
>
Button 1
</button>
<button
appearance="outline"
tuiButton
type="button"
>
Button 2
</button>
<button
appearance="outline"
iconStart="@tui.chevron-down"
title="A sample of icon-button in a group"
tuiIconButton
type="button"
[style.flex]="'0 0 auto'"
></button>
</div>
.group {
max-inline-size: 30rem;
white-space: nowrap;
}
<form
orientation="vertical"
tuiGroup
class="group"
[collapsed]="true"
[formGroup]="form"
>
<label
tuiBlock
[style.justify-content]="'space-between'"
>
Oranges
<input
formControlName="value"
tuiRadio
type="radio"
value="orange"
/>
</label>
<label tuiBlock>
Apples
<input
formControlName="value"
tuiRadio
type="radio"
value="apple"
[style.margin-inline-start]="'auto'"
/>
</label>
<label tuiBlock>
Pineapples
<input
formControlName="value"
tuiRadio
type="radio"
value="pineapple"
/>
</label>
</form>
Directive helps to avoid extra layers of HTML
<p>Directive helps to avoid extra layers of HTML</p>
<form
tuiGroup
[collapsed]="true"
[formGroup]="form"
>
<label tuiBlock>
<span tuiTitle>
Orange
<span tuiSubtitle>An orange is a fruit of various citrus species in the family Rutaceae</span>
</span>
<input
formControlName="value"
tuiRadio
type="radio"
value="orange"
/>
</label>
<label tuiBlock>
<span tuiTitle>
Pineapple
<span tuiSubtitle>
Not to be confused with neither
<em>pines</em>
nor
<em>apples</em>
</span>
</span>
<input
formControlName="value"
tuiRadio
type="radio"
value="pineapple"
/>
</label>
</form>
.content {
padding: 0.5rem 0;
white-space: normal;
}