Skip to content Herbst UI beta

Component

Input

A directive that styles native <input> and <textarea> elements. Pick a size, signal validation status, toggle the border and focus ring, and layer on numeric, currency, or mask directives for constrained entry.

Sizes, fluid & textarea 

import { ChangeDetectionStrategy, Component } from '@angular/core';

import { HbInputDirective } from '@herbst/ui';

@Component({
  selector: 'hb-demo-input-sizes',
  imports: [HbInputDirective],
  template: `
    <div class="flex w-full max-w-sm flex-col gap-3">
      <input hb-input hbSize="xs" placeholder="Extra small" />
      <input hb-input hbSize="sm" placeholder="Small" />
      <input hb-input hbSize="md" placeholder="Medium (default)" />
      <input hb-input hbSize="lg" placeholder="Large" />
      <input hb-input hbSize="xl" placeholder="Extra large" />
      <input hb-input hbFluid placeholder="Fluid — fills its container" />
      <textarea hb-input hbFluid placeholder="Textarea auto-grows with content"></textarea>
    </div>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class HbDemoInputSizesComponent {}

Status, ring & borderless

Numeric, currency & mask

Value: —

API reference

input[hb-input] / textarea[hb-input]

PropertyDescriptionTypeDefault
[hbSize] Control height and text scale. 'xs' | 'sm' | 'md' | 'lg' | 'xl' 'md'
[hbStatus] Validation colouring for the border and focus ring. 'default' | 'success' | 'warning' | 'error' 'default'
[hbInvalid] Set aria-invalid and apply the destructive styling, independent of hbStatus. boolean false
[hbBorderless] Drop the border, background, and shadow — for embedding in groups. boolean false
[hbRing] Toggle the focus-visible ring. boolean true
[hbFluid] Stretch to the full width of the container instead of sizing to content. boolean false

Companion directives

PropertyDescriptionTypeDefault
input[hbNumeric] Restrict typing to digits. [hbSign] = both | positive | negative, [hbDecimal] allows one dot. directive hbSign 'both', hbDecimal false
input[hbCurrency] Format as currency while typing. [hbCurrency] code, [hbLocale], and two-way [(hbCurrencyValue)] as a number. directive hbCurrency 'USD'
input[hbMask] Reject input that does not match the pattern. [hbMask] takes a string or RegExp. directive ''