InputInline KIT

    
      
    

      
        Copy
      
      
    
  

    
      <form [formGroup]="form">
    <tui-input-inline class="input1">
        <input formControlName="testValue1" />
    </tui-input-inline>
    <tui-input-inline class="input2">
        <input formControlName="testValue2" />
    </tui-input-inline>
    <tui-input-inline class="input3">
        <input formControlName="testValue3" />
    </tui-input-inline>
    <tui-input-inline
        class="input4"
        [class.input4_empty]="input4Empty"
    >
        (Show placeholder if control is empty)
        <input formControlName="testValue4" />
    </tui-input-inline>
</form>

<button
    size="m"
    tuiButton
    type="button"
    (click)="onToggleClick()"
>
    {{ toggleContent }}
</button>

    

      
        Copy
      
      
    
  

    
      @import '@taiga-ui/styles/utils.less';

.input1,
.input2,
.input3 {
    margin-inline-end: 0.625rem;
}

.input1 {
    border: 2px solid var(--tui-status-negative);
}

.input2 {
    background: var(--tui-background-accent-opposite);
    padding: 0.625rem;
    color: var(--tui-background-base);
    letter-spacing: 0.625rem;
    font-size: 1.25rem;
}

.input3 {
    font-family: monospace;
    font-weight: bold;
    background: var(--tui-border-normal);
}

.input4 {
    &_empty {
        opacity: 0.3;
    }
}

    

      
        Copy
      
      
    
  

    
      
    

      
        Copy
      
      
    
  

    
      <form (ngSubmit)="save()">
    <h4>
        @if (editing()) {
            <tui-input-inline>
                <span>Type a heading</span>
                <input
                    name="heading"
                    tuiAutoFocus
                    [ngModelOptions]="{updateOn: 'submit'}"
                    [(ngModel)]="heading"
                    (blur)="editing.set(false)"
                    (keydown.esc.prevent)="editing.set(false)"
                />
            </tui-input-inline>
            <button
                appearance="action"
                iconStart="@tui.check"
                size="xs"
                tuiIconButton
                type="submit"
                (pointerdown.prevent)="(0)"
            >
                Save
            </button>
        } @else {
            {{ heading() }}
            <button
                appearance="icon"
                iconStart="@tui.pencil"
                size="xs"
                tuiIconButton
                type="button"
                (click)="editing.set(true)"
            >
                Edit heading
            </button>
        }
    </h4>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa exercitationem, sed? Deserunt dignissimos
        dolorem doloribus officiis quae repellat rerum? Accusantium fuga hic nam necessitatibus non officiis perferendis
        repellendus tempore voluptates!
    </p>
    <p>
        Accusantium adipisci blanditiis esse est et eum fugit id illum, in iste itaque iusto laborum nostrum officia
        quam quasi quos repellat temporibus tenetur, ullam? Blanditiis fuga iusto maiores omnis quidem!
    </p>
</form>

    

      
        Copy
      
      
    
  

    
      h4 {
    display: flex;
    block-size: 2rem;
    align-items: center;
    white-space: nowrap;
    font: var(--tui-typography-heading-h5);
    line-height: 2rem;
    gap: 0.25rem;
    margin: 0;
}

span {
    color: var(--tui-text-tertiary);
}

    

      
        Copy
      
      
    
  

    
      
    

      
        Copy
      
      
    
  

    
      <tui-input-inline class="input1">
    <input [(ngModel)]="count" />
</tui-input-inline>

    

      
        Copy
      
      
    
  

    
      @import '@taiga-ui/styles/utils.less';

.input1 {
    border: 2px solid var(--tui-status-negative);
    padding: 0.625rem;
    font-size: 1.25rem;
    text-align: center;
}

    

      
        Copy
      
      
    
  

    
      
    

      
        Copy
      
      
    
  

    
      <ul class="task">
    <li>
        I
        <tui-input-inline>
            <input ngModel="am" />
        </tui-input-inline>
        funny.
    </li>

    <li>
        He
        <tui-input-inline [class._empty]="!answer">
            <!-- Any text inside tui-input-inline is placeholder-->
            <!-- It will be shown fully even for unset width of InputInline -->
            ___
            <input [(ngModel)]="answer" />
        </tui-input-inline>
        funny.
    </li>

    <li>
        You
        <tui-input-inline [style.max-width.ch]="15">
            <input
                ngModel=""
                placeholder="___"
                spellcheck="false"
            />
        </tui-input-inline>
        funny.
    </li>
</ul>

<section class="task">
    <p>
        <strong>Writing practice</strong>
        <br />
        Learning to
        <s>write</s>
        type underscore and hyphen
    </p>
    <!-- prettier-ignore -->
    <div>
        ___<tui-input-inline>
        <input
            ngModel=""
            placeholder="___"
        />
    </tui-input-inline>------<tui-input-inline>
        <input
            ngModel=""
            placeholder="------"
        />
    </tui-input-inline>
    </div>
</section>

    

      
        Copy
      
      
    
  

    
      .task:first-child input:not(:placeholder-shown) {
    text-decoration: underline;
    text-align: center;
}

tui-input-inline._empty,
tui-input-inline:has(input:placeholder-shown) {
    color: var(--tui-text-tertiary);
}

tui-input-inline:has(input[placeholder]) {
    min-inline-size: 3ch;
}

    

      
        Copy