Text Field
Text fields let users enter and edit text. They typically appear in forms and dialogs.
<x-mbc::text-field label="First Name" id="basic-firstname" />
<x-mbc::text-field label="Email Address" type="email" id="basic-email" />Basic Text Field
A basic text field with a floating label. The label automatically floats above the input when focused or filled.
Standard text field:
With placeholder:
With default value:
Disabled state:
Required field:
<!-- Standard text field -->
<x-mbc::text-field label="Label" id="basic-1" />
<!-- With placeholder -->
<x-mbc::text-field label="Full Name" placeholder="Enter your full name" id="basic-2" />
<!-- With default value -->
<x-mbc::text-field label="Username" value="john_doe" id="basic-3" />
<!-- Disabled state -->
<x-mbc::text-field label="Disabled Field" disabled id="basic-4" />
<!-- Required field -->
<x-mbc::text-field label="Required Field" required id="basic-5" />Best Practice: Always provide a meaningful label. Use placeholder text sparingly as it disappears when the user starts typing.
Variants
Text fields come in two variants: filled (default) and outlined. Choose the variant that best fits your design.
Filled (Default):
Outlined:
Filled with value:
Outlined with value:
<!-- Filled (Default) -->
<x-mbc::text-field label="Filled Text Field" variant="filled" id="variant-1" />
<!-- Outlined -->
<x-mbc::text-field label="Outlined Text Field" variant="outlined" id="variant-2" />
<!-- Filled with value -->
<x-mbc::text-field label="Email" variant="filled" value="user@example.com" id="variant-3" />
<!-- Outlined with value -->
<x-mbc::text-field label="Phone" variant="outlined" value="+1 234 567 8900" id="variant-4" />Tip: Filled text fields have more visual emphasis, while outlined text fields are better for tight spaces.
Text Field with Icons
Add icons to text fields using leadingIcon or trailingIcon. Icons help users understand the field's purpose.
Leading icon (Filled):
Leading icon (Outlined):
Trailing icon (Filled):
Trailing icon (Outlined):
Both icons:
<!-- Leading icon (Filled) -->
<x-mbc::text-field label="Search" leadingIcon="search" id="icon-1" />
<!-- Leading icon (Outlined) -->
<x-mbc::text-field label="Email" variant="outlined" leadingIcon="email" type="email" id="icon-2" />
<!-- Trailing icon (Filled) -->
<x-mbc::text-field label="Password" trailingIcon="visibility" type="password" id="icon-3" />
<!-- Trailing icon (Outlined) -->
<x-mbc::text-field label="Phone" variant="outlined" trailingIcon="phone" id="icon-4" />
<!-- Both icons -->
<x-mbc::text-field label="Location" leadingIcon="place" trailingIcon="my_location" id="icon-5" />Tip: Leading icons help identify the field type, while trailing icons often represent actions (like show/hide password).
Helper Text
Helper text provides additional context or instructions. Use helperTextPersistent to keep it always visible, or helperTextValidation for error messages.
Basic helper text:
Persistent helper text:
Validation message:
Outlined with helper text:
<!-- Basic helper text -->
<x-mbc::text-field label="Username" helperText="Choose a unique username" id="helper-1" />
<!-- Persistent helper text -->
<x-mbc::text-field label="Password" type="password" helperText="Must be at least 8 characters" :helperTextPersistent="true" id="helper-2" />
<!-- Validation message -->
<x-mbc::text-field label="Email" type="email" helperText="Please enter a valid email address" :helperTextValidation="true" :helperTextPersistent="true" id="helper-3" />
<!-- Outlined with helper text -->
<x-mbc::text-field label="Phone Number" variant="outlined" helperText="Format: +1 234 567 8900" :helperTextPersistent="true" id="helper-4" />Best Practice: Use persistent helper text for important instructions. Validation messages should only appear when there's an error.
Prefix and Suffix
Add prefix or suffix text to provide context for the input value, such as currency symbols or units of measurement.
Prefix (Currency):
Suffix (Unit):
Both prefix and suffix:
With icon and prefix:
With suffix and helper:
<!-- Prefix (Currency) -->
<x-mbc::text-field label="Amount" prefix="$" type="number" id="prefix-1" />
<!-- Suffix (Unit) -->
<x-mbc::text-field label="Weight" suffix="kg" type="number" variant="outlined" id="prefix-2" />
<!-- Both prefix and suffix -->
<x-mbc::text-field label="Price" prefix="$" suffix="USD" type="number" id="prefix-3" />
<!-- With icon and prefix -->
<x-mbc::text-field label="Website" leadingIcon="language" prefix="https://" variant="outlined" id="prefix-4" />
<!-- With suffix and helper -->
<x-mbc::text-field label="Distance" suffix="miles" type="number" helperText="Enter the distance in miles" id="prefix-5" />Tip: Prefix and suffix text helps users understand what format or unit to use without reading lengthy instructions.
Textarea
Use :textarea="true" for multi-line text input. Control the size with rows and cols attributes.
Basic textarea (Filled):
Textarea (Outlined):
Textarea with helper text:
Textarea with value:
<!-- Basic textarea (Filled) -->
<x-mbc::text-field label="Description" :textarea="true" :rows="4" id="textarea-1" />
<!-- Textarea (Outlined) -->
<x-mbc::text-field label="Comments" variant="outlined" :textarea="true" :rows="5" id="textarea-2" />
<!-- Textarea with helper text -->
<x-mbc::text-field label="Bio" :textarea="true" :rows="6" helperText="Tell us about yourself" id="textarea-3" />
<!-- Textarea with value -->
<x-mbc::text-field label="Message" variant="outlined" :textarea="true" :rows="4" value="This is a pre-filled message." id="textarea-4" />Use Case: Use textareas for longer text input like comments, descriptions, or messages where multiple lines are expected.
Character Counter
Display a character counter by setting :characterCounter="true" and providing a maxlength attribute.
Text field with counter:
Outlined with counter:
Textarea with counter:
With counter and helper:
<!-- Text field with counter -->
<x-mbc::text-field label="Username" maxlength="20" :characterCounter="true" id="counter-1" />
<!-- Outlined with counter -->
<x-mbc::text-field label="Tweet" variant="outlined" maxlength="280" :characterCounter="true" id="counter-2" />
<!-- Textarea with counter -->
<x-mbc::text-field label="Bio" :textarea="true" :rows="4" maxlength="150" :characterCounter="true" helperText="Keep it brief" id="counter-3" />
<!-- With counter and helper -->
<x-mbc::text-field label="Description" maxlength="100" :characterCounter="true" helperText="Maximum 100 characters" :helperTextPersistent="true" id="counter-4" />Best Practice: Use character counters when there's a hard limit on input length to help users stay within bounds.
Input Types
Text fields support all HTML5 input types. Use the type attribute to specify the input type for better semantics and mobile keyboards.
Text (Default):
Email:
Password:
Number:
Tel (Phone):
URL:
Date:
Time:
<!-- Text (Default) -->
<x-mbc::text-field label="Full Name" type="text" id="type-1" />
<!-- Email -->
<x-mbc::text-field label="Email Address" type="email" leadingIcon="email" id="type-2" />
<!-- Password -->
<x-mbc::text-field label="Password" type="password" trailingIcon="visibility" id="type-3" />
<!-- Number -->
<x-mbc::text-field label="Age" type="number" variant="outlined" id="type-4" />
<!-- Tel (Phone) -->
<x-mbc::text-field label="Phone Number" type="tel" leadingIcon="phone" id="type-5" />
<!-- URL -->
<x-mbc::text-field label="Website" type="url" prefix="https://" variant="outlined" id="type-6" />
<!-- Date -->
<x-mbc::text-field label="Birth Date" type="date" id="type-7" />
<!-- Time -->
<x-mbc::text-field label="Appointment Time" type="time" variant="outlined" id="type-8" />Tip: Using the correct input type improves accessibility and provides better mobile keyboard layouts (e.g., number pad for phone numbers).
Properties
mbc::text-field
| Name | Type | Default | Description |
|---|---|---|---|
characterCounter
|
boolean
|
false
|
Whether to show character counter (requires maxlength) |
cols
|
int
|
null
|
Number of columns for textarea |
disabled
|
boolean
|
false
|
Whether the text field is disabled |
endAligned
|
boolean
|
false
|
Whether to align text to the end |
helperText
|
string
|
null
|
Helper text displayed below the text field |
helperTextPersistent
|
boolean
|
false
|
Whether helper text should always be visible |
helperTextValidation
|
boolean
|
false
|
Whether helper text is a validation message |
label
|
string
|
null
|
The floating label text |
leadingIcon
|
string|array
|
null
|
Icon to display at the start of the field |
prefix
|
string
|
null
|
Prefix text (e.g., currency symbol) |
required
|
boolean
|
false
|
Whether the text field is required |
rows
|
int
|
null
|
Number of rows for textarea |
suffix
|
string
|
null
|
Suffix text (e.g., unit of measurement) |
textarea
|
boolean
|
false
|
Whether to render as textarea |
trailingIcon
|
string|array
|
null
|
Icon to display at the end of the field |
type
|
string
|
text
|
HTML input type (text, email, password, number, etc.) |
variant
|
string
|
filled
|
Text field variant: filled or outlined |