Dasar UI Library

Input

A foundational text input component that supports theming, custom masking, validation states, and rich content slots.

Basic Usage

Email Address

Bound Value: None

Appearance & Sizes

Outline (Default)

Filled Appearance

Small Size

Medium Size

Large Size

Prefix, Suffix & Slots

Search Users

Website URL

https://

.com

Password

Need help?

Input Masks

Currency (Thousand Mask)

Date Mask

Custom Mask (Uppercase)

Validation & States

Readonly Field

Error State

Invalid username format.

Disabled State

This field is currently disabled.

More Example

Salary Expectation

/ month

Newsletter Subscription

Short Bio

0 / 50

API Reference

Property	Type	Default	Description
`value`	`any`	''	The input value. Supports two-way binding [(ngModel)] and Reactive Forms.
`type`	`DasarInputType`	'text'	Native HTML input type (text, password, email, number, search, url, tel).
`mask`	`DasarInputMaskType`	undefined	Built-in masks ("thousand", "decimal", "date") or a custom formatting function.
`appearance`	`'outline' \| 'filled'`	'outline'	Visual style of the input container.
`size`	`'sm' \| 'md' \| 'lg'`	'md'	Controls height, padding, and font size.
`radius`	`ScaleAttributeType`	'md'	Border radius.
`label / label-right`	`string`	undefined	Text labels rendered above the input.
`hint`	`string`	undefined	Helper text rendered below the input.
`placeholder`	`string`	''	Native placeholder attribute.
`full-width`	`boolean`	false	Expands the component to 100% width.
`disabled / readonly`	`boolean`	false	Standard HTML disabled and readonly states.
`error`	`boolean`	false	Applies red validation styling.
`fluid`	`boolean`	false	Removes all padding from the input container.
`(valueChange)`	`EventEmitter<any>`	-	Emits whenever the input value changes.
`[prefix] / [suffix]`	`Content Slot`	-	Directives to project content inside the left or right of the input container.
`[extra-label-slot]`	`Content Slot`	-	Replaces the label-right text with custom HTML content.