---
title: "Angular Forms Customize the input Example | Mobiscroll"
component: "Forms"
framework: "Angular"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/angular/forms/input-label-types"
---
# Customize the input - Angular Forms demo
Angular input examples with underlined, boxed and outline rendering and labels stacked, inline and floating.
- [Live demo](https://demo.mobiscroll.com/angular/forms/input-label-types)
- [View code on GitHub](https://github.com/acidb/mobiscroll-demos-angular/tree/main/src/demos/form-components/forms/input-label-types)
- This demo in other frameworks: [JavaScript](https://demo.mobiscroll.com/javascript/forms/input-label-types.md), [jQuery](https://demo.mobiscroll.com/jquery/forms/input-label-types.md), [React](https://demo.mobiscroll.com/react/forms/input-label-types.md), [Vue](https://demo.mobiscroll.com/vue/forms/input-label-types.md)
## Description
The three input styles: `underline`, `box` and `outline` can be combined with three label styles: `stacked`, `inline` or `floating`. Try different combinations to find what's right for you.
## What this demo shows
- This demo shows examples for different input and label styles.
- **Input styles** Underline, box, and outline styling for form controls.
- **Label styles** Stacked, inline, and floating labels combined with each input style.
- **Style controls** Controls for dynamically switching between the available input and label styles.
- **Field types** Consistent styling across text inputs, text areas, select inputs, and file uploads.
- **Field variations** Fields with icons, validation error styling, and no labels.
## Best for
- **Brand-aligned forms** Comparing input and label combinations when adapting forms to a product's visual style.
- **Mixed-field forms** Applying consistent styling across text inputs, text areas, selects, and file uploads.
- **Compact and spacious layouts** Evaluating inline, stacked, and floating labels for forms with different space constraints.
- **Validation states** Styling fields that need clear error feedback alongside their standard state.
- **Icon-supported inputs** Presenting fields that use icons to provide additional visual context.
## Tutorial
### Input type
- (x) Underline
- ( ) Box
- ( ) Outline
### Label type
- (x) Stacked
- ( ) Inline
- ( ) Floating
```html
```
With "Box":
```html
```
With "Outline":
```html
```
With "Inline":
```html
```
With "Floating":
```html
```
## API used in this demo
- [`inputStyle`](https://mobiscroll.com/docs/angular/forms/input#opt-inputStyle) - option
- [`labelStyle`](https://mobiscroll.com/docs/angular/forms/input#opt-labelStyle) - option
- [`inputStyle`](https://mobiscroll.com/docs/angular/forms/textarea#opt-inputStyle) - option
- [`labelStyle`](https://mobiscroll.com/docs/angular/forms/textarea#opt-labelStyle) - option
- [`inputStyle`](https://mobiscroll.com/docs/angular/forms/dropdown#opt-inputStyle) - option
- [`labelStyle`](https://mobiscroll.com/docs/angular/forms/dropdown#opt-labelStyle) - option
## Code
### Component
```ts
import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { MbscModule, setOptions } from '@mobiscroll/angular';
setOptions({
theme: 'ios',
themeVariant: 'light'
});
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
standalone: true,
imports: [CommonModule, MbscModule],
})
export class AppComponent {}
```
### Template
```html
Underline inputs with stacked labels
Underline inputs with inline labels
Underline inputs with floating labels
Box inputs with stacked labels
Box inputs with inline labels
Box inputs with floating labels
Outline inputs with stacked labels
Outline inputs with inline labels
Outline inputs with floating labels
```
## Implementation notes
- `inputStyle` accepts `underline`, `box`, or `outline`; `labelStyle` accepts `stacked`, `inline`, or `floating`. Both options apply uniformly to `Input`, `Textarea`, and `Dropdown` (and to a `type="file"` input, which is just an `Input` variant) and can be combined freely (`data-input-style`/`data-label-style` in JS/jQuery).
- `startIcon`/`endIcon` (`data-start-icon`/`data-end-icon` in JS/jQuery) place an icon inside the field, before or after the value.
- `error` (boolean) applies error styling to a field; `errorMessage` adds explanatory text shown below it.
- `passwordToggle` (boolean), combined with `type="password"`, adds a show/hide toggle control to a password field.
- Omitting the `label` prop/attribute (and its wrapping text in JS/jQuery) renders the field with no label, keeping only its `placeholder`.
- `Dropdown`/`mbsc-dropdown`/`select[mbsc-dropdown]` takes the same `inputStyle`, `labelStyle`, `startIcon`, and `endIcon` options as `Input`; its options are plain `