# Text

**Path:** Components/Form Inputs

[Back to Documentation Index](http://rubicblazor.skyconis.com/docs.md)

---

Text

 RbText and RbTextArea components provide single-line and multi-line text input with masking, validation, and formatting features.

 Basic Usage

 Simple text inputs with labels, placeholders, and clear button functionality.

 Show code

 Simple Text Input 

 With Placeholder 

 With Clear Button 

 Simple Text: 

 With Placeholder: 

 With Clear: Click X to clear

 Variants

 Different visual styles: Default, Outlined and Filled variants.

 Show code

 Default 
 Primary 
 Secondary 
 Info 
 Warning 
 Danger 
 Success 

 Default 

 Outlined 

 Filled 

 Required Field

 Mark inputs as required with asterisk indicator for all variants.

 Show code

 Default Required 

 Outlined Required 

 Filled Required 

 Text Formatting

 Automatic text transformation with Uppercase, Lowercase, and NumericOnly options.

 Show code

 Uppercase 

 Lowercase 

 Numeric Only 

 Uppercase: Try typing lowercase

 Lowercase: TRY TYPING UPPERCASE

 Numeric: 1234567890

 Input Masking

 Apply input masks for phone numbers, credit cards, dates, and custom patterns.

 Show code

 Phone Number 

 Credit Card 

 Date (DD/MM/YYYY) 

 Time (HH:MM) 

 Custom Mask 

 Phone: 

 Card: 

 Date: 

 Time: 

 Custom: 

 Password

 Password inputs with visibility toggle and secure text entry.

 Show code

 Password 

 Password with Clear 

 Toggle Password 

 Password with MaxLength (20) 

 Password 1: 

 Password 2: Secret123

 Password 3: ToggleMe (Visible: False)

 Password 4: SecurePass

 MaxLength

 Limit character count for text inputs and textareas.

 Show code

 Max Length (10) 

 TextArea Max Length (100) 

 TextArea

 Multi-line text input with auto-resize and character limits.

 Show code

 Multi-line TextArea

 Simple TextArea 

 BodyClick Mode

 Click anywhere on the input to trigger custom actions. Input is readonly to prevent manual typing.

 Show code

 Click to increment counter 

 Click to Select Value 

 Input 1 clicks: 0

 Selected value: Option A

 Readonly & Disabled

 Control input interaction states with Readonly and Disabled parameters.

 Show code

 Normal 

 Readonly 

 Disabled 

 Normal: You can edit this

 Readonly: This is readonly - cannot edit

 Disabled: This is disabled - cannot interact

 RTL Support

 Use the component inside an RTL container with localized labels and values.

 Show code

 الاسم الكامل 

 الوصف المختصر 

 ✕

 Contents