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
      
      
    
  

    
      <h2
    class="header"
    [class.header_empty]="!heading"
>
    @if (editing) {
        <tui-input-inline>
            Type a heading
            <input
                tuiAutoFocus
                [(ngModel)]="heading"
                (blur)="onBlur()"
                (keydown.enter.prevent)="toggle()"
            />
        </tui-input-inline>
    } @else {
        <span>{{ heading }}</span>
        <button
            appearance="icon"
            iconStart="@tui.pencil"
            size="xs"
            tuiIconButton
            type="button"
            class="tui-space_left-1"
            (click)="toggle()"
        >
            Edit heading
        </button>
    }
</h2>

<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>

    

      
        Copy
      
      
    
  

    
      .header {
    display: flex;
    block-size: 1.5rem;
    align-items: center;
    white-space: nowrap;
    line-height: 1.5rem;

    &_empty {
        opacity: 0.3;
    }
}

    

      
        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