# Text fields

Text fields components are used for collecting user provided information.

# Usage

A simple text field with placeholder and/or label.

# API

MTextField

# Examples

# Props

# Counter

Use a Counter prop to inform a user of the character limit. The counter does not perform any validation by itself - you will need to pair it with either the internal validation system, or a 3rd party library. The counter can be customised with the CounterValue prop and CounterContent.

Regular

18/25

Limit exceeded

50/25

Custom counter from prop

2/5

Custom counter from slot

2/5

# Clearable

When Clearable, you can customize the clear icon with ClearIcon.

# Custom colors

You can optionally change a text field into any color in the Material design palette. Below is an example implementation of a custom form with validation.

# Custom text colors

You can optionally change a text in the input box into any color in the Material design palette.

# Dense

You can reduce the text field height with Dense prop.

# Disabled and readonly

Text fields can be Disabled or Readonly.

# Filled

Text fields can be used with an alternative box design.

# HideDatails

When HideDetails is set to auto messages will be rendered only if there’s a message (hint, error message, counter value etc) to display.

# Hint

The Hint property on text fields adds the provided string beneath the text field. Using PersistentHint keeps the hint visible when the text field is not focused. Hint prop is not supported in Solo mode.

# Icons

You can add icons to the text field with PrependIcon, AppendIcon and AppendOuterIcon props.

# Input Number

Numeric-only input box.

# Outlined

Text fields can be used with an alternative outlined design.

# Prefixes and suffixes

The Prefix and Suffix properties allows you to prepend and append inline non-modifiable text next to the text field.

# Shaped

Shaped text fields are rounded if they’re Outlined and have higher border-radius if Filled.

# SingleLine

SingleLine text fields do not float their label on focus or with data.

# Solo

Text fields can be used with an alternative Solo design.

# Validation

MASA Blazor includes simple validation through the rules prop. The prop accepts a mixed array of types function, boolean and string. When the input value changes, each element in the array will be validated. Functions pass the current value as an argument and must return either true / false or a string containing an error message.

# Events

# IconEvents

OnPrependClick, OnAppendClick, OnAppendOuterClick, and OnClearClick will be emitted when you click on the respective icon. Note that these events will not be fired if the icon content is used instead.

# Contents

# IconSlots

Instead of using Prepend/Append/AppendOuter icons you can use contents to extend input’s functionality.

# Label

Text field label can be defined in LabelContent。

# Progress

You can display a progress bar instead of the bottom line. You can use the default indeterminate progress having same color as the text field or designate a custom one using the ProgressContent