Text Field Components

Filled Text Fields

Filled text fields use a solid background (surface-container-low) and are the default variant for form inputs. They provide clear visual prominence for user input areas.

Default

With Help Text

Enter your full name

Required

Disabled

With Error

Please enter a valid email address

With Value

Leading Icon

person

Trailing Icon

visibility

Both Icons

mail send

Secondary Color

Tertiary Color

Outlined Text Fields

Outlined text fields use a border to define their boundaries instead of a filled background. They are less prominent and work well in dense UIs or when multiple fields are grouped together.

Default

With Help Text

Enter your full name

Required

Disabled

With Error

Please enter a valid email address

With Value

Leading Icon

person

Trailing Icon

visibility

Both Icons

mail send

Secondary Color

Tertiary Color

Usage

<!-- Filled text field (default variant) -->
<c-forms.text.filled id="name">Full Name</c-forms.text.filled>

<!-- Outlined text field -->
<c-forms.text.outlined id="outlined_name">Full Name</c-forms.text.outlined>

<!-- With help text -->
<c-forms.text.filled id="name_help" help_text="Enter your full name">Full Name</c-forms.text.filled>
<c-forms.text.outlined id="outlined_help" help_text="Enter your full name">Full Name</c-forms.text.outlined>

<!-- Required field -->
<c-forms.text.filled id="email" type="email" required>Email Address</c-forms.text.filled>

<!-- With error message -->
<c-forms.text.filled id="email_error" type="email" 
    error="Please enter a valid email address">Email Address</c-forms.text.filled>

<!-- With initial value -->
<c-forms.text.filled id="prefilled" value="John Doe">Full Name</c-forms.text.filled>

<!-- With icons -->
<c-forms.text.filled id="leading_icon" leading_icon="person">Username</c-forms.text.filled>
<c-forms.text.outlined id="outlined_icon" leading_icon="mail" trailing_icon="send">Email</c-forms.text.outlined>

<!-- Disabled field -->
<c-forms.text.filled id="disabled" disabled>Disabled Field</c-forms.text.filled>

<!-- With color variants -->
<c-forms.text.filled id="secondary" color="secondary">Secondary Field</c-forms.text.filled>
<c-forms.text.outlined id="tertiary_outlined" color="tertiary">Tertiary Field</c-forms.text.outlined>

Attributes

Attribute
Type
Default
Description
id string none Unique identifier for the input field (required)
color string "primary" Input color theme. Options: "primary", "secondary", "tertiary"
type string "text" Input type (text, email, password, etc.)
leading_icon string none Material icon name to display at the start of the input
trailing_icon string none Material icon name to display at the end of the input
help_text string none Helper text displayed below the input
error string none Error message to display
value string none Initial value for the input
required boolean false When true, the field is required
disabled boolean false When true, the input is disabled and non-interactive