Taiga UI 5.0 is out!
See what's new
Form LAYOUT
Size sets DI options, therefore it only works for static values like tuiForm="m" . If you need dynamic binding for the size, you would have to set it for buttons, segmented control and header manually as well.
On this page
Basic
Using
ElasticContainer to animate dynamic content
<form
appearance="floating"
tuiCardLarge
tuiForm="m"
[formGroup]="form"
[style.max-width.rem]="32"
>
<header tuiHeader>
<h2 tuiTitle>
Registration form
<span tuiSubtitle>Tell us about yourself</span>
</h2>
<span tuiAccessories>
<tui-segmented>
<label>
<input
formControlName="basic"
type="radio"
[value]="true"
/>
Brief
</label>
<label>
<input
formControlName="basic"
type="radio"
[value]="false"
/>
Detailed
</label>
</tui-segmented>
</span>
</header>
<div
appearance="warning"
tuiNotification
>
<h3 tuiTitle>
Authenticity required
<span tuiSubtitle>Please be honest and use your real data</span>
</h3>
</div>
<tui-textfield>
<label tuiLabel>Name</label>
<input
formControlName="name"
placeholder="John Wick"
tuiInput
/>
</tui-textfield>
<tui-error formControlName="name" />
<tui-elastic-container>
@if (!form.controls.basic.value) {
<tui-textfield tuiAnimated>
<label tuiLabel>Email</label>
<input
formControlName="email"
placeholder="john@wick.com"
tuiInput
type="email"
/>
</tui-textfield>
<label
tuiAnimated
tuiLabel
>
<input
formControlName="subscribe"
tuiSwitch
type="checkbox"
/>
Subscribe for newsletter
<tui-icon tuiTooltip="We will not send you spam, pinky promise!" />
</label>
}
</tui-elastic-container>
<footer>
<button
appearance="secondary"
tuiButton
type="button"
>
Cancel
</button>
<button
tuiButton
type="submit"
>
Submit
</button>
</footer>
</form>
Expansive
Using multiple different components inside a big form.
<form
tuiForm
[formGroup]="form"
[style.max-width.rem]="35"
>
<header tuiHeader>
<h3 tuiTitle>
A header
<span tuiSubtitle>Form with large controls</span>
</h3>
</header>
<tui-textfield>
<label tuiLabel>Textfield</label>
<input
formControlName="nameValue"
placeholder="Field placeholder"
tuiInput
/>
<tui-icon tuiTooltip="A tooltip" />
</tui-textfield>
<tui-error formControlName="nameValue" />
<tui-textfield>
<label tuiLabel>Input date</label>
<input
formControlName="periodValue"
placeholder="Placeholder"
tuiInputDate
/>
<tui-calendar *tuiDropdown />
</tui-textfield>
<tui-error formControlName="periodValue" />
<fieldset>
<div class="stack">
<tui-textfield>
<label tuiLabel>Input password</label>
<input
formControlName="passwordValue"
tuiInput
type="password"
/>
<tui-icon tuiPassword />
</tui-textfield>
<tui-error formControlName="passwordValue" />
</div>
<div class="stack">
<tui-textfield>
<label tuiLabel>Input money</label>
<input
formControlName="moneyValue"
tuiInputNumber
[postfix]="' RUB' | tuiCurrency"
/>
</tui-textfield>
<tui-error formControlName="moneyValue" />
</div>
</fieldset>
<tui-textfield tuiTextfieldSize="l">
<input
formControlName="quantityValue"
tuiInputSlider
[max]="3000000"
[min]="50000"
/>
<input
tuiSlider
type="range"
/>
</tui-textfield>
<div class="ticks-labels">
<span>from 50 000 ₽</span>
<span>to 3 000 000 ₽</span>
</div>
<fieldset>
<div class="stack">
<tui-textfield
tuiChevron
[tuiTextfieldCleaner]="false"
>
<label tuiLabel>Choose a person</label>
<input
formControlName="personValue"
tuiSelect
/>
<tui-data-list-wrapper
*tuiDropdown
[items]="persons"
/>
</tui-textfield>
<tui-error formControlName="personValue" />
</div>
<div class="stack">
<tui-textfield>
<label tuiLabel>Input phone</label>
<input
autocomplete="tel"
formControlName="phoneValue"
mask="+7 ### ###-##-##"
tuiInputPhone
/>
</tui-textfield>
<tui-error formControlName="phoneValue" />
</div>
</fieldset>
<div
tuiGroup
[collapsed]="true"
>
<label tuiBlock>
Option 1
<input
formControlName="radioValue"
tuiRadio
type="radio"
value="with-commission"
[style.margin-inline-start]="'auto'"
/>
</label>
<label tuiBlock>
Option 2
<input
formControlName="radioValue"
tuiRadio
type="radio"
value="without-commission"
[style.margin-inline-start]="'auto'"
/>
</label>
</div>
<fieldset>
<label tuiLabel>
<input
formControlName="osnoValue"
tuiCheckbox
type="checkbox"
/>
First option
</label>
<label tuiLabel>
<input
formControlName="usnValue"
tuiCheckbox
type="checkbox"
/>
Easter Egg
</label>
</fieldset>
<fieldset>
<label tuiLabel>
<input
formControlName="eshnValue"
tuiCheckbox
type="checkbox"
/>
Boring option
</label>
<label tuiLabel>
<input
formControlName="envdValue"
tuiCheckbox
type="checkbox"
/>
Interesting option
</label>
</fieldset>
<footer>
<button
tuiButton
type="submit"
>
Submit
</button>
<button
appearance="flat"
tuiButton
type="button"
>
Cancel
</button>
</footer>
</form>
@import '@taiga-ui/styles/utils.less';
.stack {
display: flex;
gap: inherit;
flex-direction: column;
}
.ticks-labels {
.tui-slider-ticks-labels();
margin-block-start: -1rem;
}
Grouped
Using multiple forms in several steps. See
Slides for animating similar scenario.
<tui-segmented
size="m"
[style.margin-block-end.rem]="2"
[style.max-width]="'fit-content'"
[(activeItemIndex)]="segmentedIndex"
>
<button type="button">Stepper</button>
<button type="button">Tabs</button>
</tui-segmented>
@switch (segmentedIndex) {
@case (0) {
<tui-stepper [activeItemIndex]="index()">
<button
tuiStep
[disabled]="index() === 1"
>
Common
</button>
<button
tuiStep
[disabled]="index() === 0"
>
Network access
</button>
</tui-stepper>
}
@case (1) {
<tui-tabs
size="m"
underline="var(--tui-background-accent-opposite-pressed)"
[activeItemIndex]="index()"
(activeItemIndexChange)="index.set($event)"
>
<button tuiTab>Common</button>
<button tuiTab>Network access</button>
</tui-tabs>
}
}
@switch (index()) {
@case (0) {
<form
appearance="floating"
tuiCardLarge
tuiForm="m"
[cleaner]="false"
[formGroup]="form"
>
<header tuiHeader>
<h2 tuiTitle>
Registration form
<span tuiSubtitle>Tell us about yourself</span>
</h2>
</header>
<tui-textfield>
<label tuiLabel>Name</label>
<input
formControlName="name"
placeholder="John Wick"
tuiInput
/>
</tui-textfield>
<fieldset>
<legend>Optional features</legend>
<label tuiLabel>
<input
checked
tuiCheckbox
type="checkbox"
/>
Newsletter
</label>
<label tuiLabel>
<input
tuiCheckbox
type="checkbox"
/>
Sell your soul
</label>
</fieldset>
</form>
<footer>
<button
appearance="secondary"
size="m"
tuiButton
type="button"
>
Cancel
</button>
<button
size="m"
tuiButton
type="submit"
(click)="next()"
>
Next
</button>
</footer>
}
@case (1) {
<form
appearance="floating"
tuiCardLarge
tuiForm="m"
[formGroup]="form"
>
<header tuiHeader>
<h2 tuiTitle>
Configuration network
<span tuiSubtitle>Fill network settings</span>
</h2>
</header>
<tui-textfield>
<label tuiLabel>IP-address</label>
<input
formControlName="ip"
placeholder="192.0.2.1"
tuiInput
/>
</tui-textfield>
</form>
<footer>
<button
appearance="secondary"
size="m"
tuiButton
type="button"
(click)="previous()"
>
Back
</button>
<button
size="m"
tuiButton
type="submit"
>
Save
</button>
</footer>
}
}
@import '@taiga-ui/styles/utils.less';
:host {
display: block;
max-inline-size: 32rem;
}
form {
margin: 1.25rem 0;
}
footer {
display: flex;
justify-content: space-between;
}
Taiga UI