Components
Input Group
Combines inputs or textareas with bordered prefix and suffix addons, creating one continuous neo-brutalism control.
Preview
Usage
Import
import { NbInput, NbInputGroup, NbInputPrefix, NbInputSuffix } from '@ng-brutalism/ui';Template
<nb-input-group class="max-w-80">
<span nbInputPrefix>@</span>
<input nbInput placeholder="username" />
</nb-input-group>Prefix and Suffix
With Label
Textarea
Disabled
Customization
Override these CSS variables on :root, a wrapper, or the component element. More local values win, so per-instance styling can sit directly on the element.
| Token | Default | Used for |
|---|---|---|
| --nb-input-group-bg | var(--nb-input-bg, var(--nb-field-bg)) | Group wrapper background |
| --nb-input-group-border | var(--nb-border) | Group wrapper border and focus ring color |
| --nb-input-group-radius | var(--nb-radius) | Group wrapper corner radius |
| --nb-input-group-addon-bg | #ffd24a | Prefix and suffix background |
| --nb-input-group-prefix-bg | var(--nb-input-group-addon-bg) | Prefix background |
| --nb-input-group-suffix-bg | var(--nb-input-group-addon-bg) | Suffix background |
| --nb-border | #000000 | Border color and focus ring color |
| --nb-shadow | #000000 | Offset shadow color |
| --nb-radius | 0rem | Corner radius through the rounded-nb utility |
| --nb-shadow-offset-x | 4px | Horizontal shadow and press offset |
| --nb-shadow-offset-y | 4px | Vertical shadow and press offset |
| --nb-foreground | #000000 | Default foreground text color |
| --nb-background | #ffffff | Default surface background color |
API
| Selector | Input | Type | Default |
|---|---|---|---|
| nb-input-group | - | - | - |
| [nbInputPrefix] | align | 'center' | 'stretch' | 'center' |
| [nbInputSuffix] | align | 'center' | 'stretch' | 'center' |