Text fields are very important components in a UI; they can be used to accept different kinds of information from users. The design of the text field is inspired by Material UI with some changes.
Text Field has two variants: filled and outlined.
<label for="textfield-1" style="line-height: 2">Filled</label>
<div class="flexy-textfield flexy-textfield--filled">
<input type="text" placeholder="Enter something" id="textfield-1" />
<div class="flexy-textfield__filled"></div>
</div>
<br />
<label for="textfield-2" style="line-height: 2">Outlined</label>
<div class="flexy-textfield flexy-textfield--outlined">
<input type="text" placeholder="Enter something" id="textfield-2" />
<div class="flexy-textfield__outlined"></div>
</div>
Leading icons can be used to display type type of the text field. Adding a click action to the leading icon isn’t recommended; if you need an icon with a click action, use a trailing icon instead.
<label for="textfield-3" style="line-height: 2">Filled</label>
<div
class="flexy-textfield flexy-textfield--filled flexy-textfield--with-leading-icon"
>
<input type="text" placeholder="Search" id="textfield-3" />
<span class="flexy-textfield__leading-icon material-symbol">
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24" role="img" aria-label="search"><path d="M380-320q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l224 224q11 11 11 28t-11 28q-11 11-28 11t-28-11L532-372q-30 24-69 38t-83 14Zm0-80q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z"/></svg>
</span>
<div class="flexy-textfield__filled"></div>
</div>
<br />
<label for="textfield-4" style="line-height: 2">Outlined</label>
<div
class="flexy-textfield flexy-textfield--outlined flexy-textfield--with-leading-icon"
>
<input type="text" placeholder="Search" id="textfield-4" />
<span class="flexy-textfield__leading-icon material-symbol">
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24" role="img" aria-label="search"><path d="M380-320q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l224 224q11 11 11 28t-11 28q-11 11-28 11t-28-11L532-372q-30 24-69 38t-83 14Zm0-80q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z"/></svg>
</span>
<div class="flexy-textfield__outlined"></div>
</div>
Trailing icons can be used to indicate the status of the input text field or trigger a specific action. Action must be relative to its text field; don’t add non-relative actions.
<label for="textfield-5" style="line-height: 2">Filled</label>
<div
class="flexy-textfield flexy-textfield--filled flexy-textfield--with-trailing-icon"
>
<input type="text" placeholder="Search" id="textfield-5" />
<span class="flexy-textfield__trailing-icon material-symbol">
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24" role="img" aria-label="mic"><path d="M480-400q-50 0-85-35t-35-85v-240q0-50 35-85t85-35q50 0 85 35t35 85v240q0 50-35 85t-85 35Zm0-240Zm-40 480v-83q-92-13-157.5-78T203-479q-2-17 9-29t28-12q17 0 28.5 11.5T284-480q14 70 69.5 115T480-320q72 0 127-45.5T676-480q4-17 15.5-28.5T720-520q17 0 28 12t9 29q-14 91-79 157t-158 79v83q0 17-11.5 28.5T480-120q-17 0-28.5-11.5T440-160Zm40-320q17 0 28.5-11.5T520-520v-240q0-17-11.5-28.5T480-800q-17 0-28.5 11.5T440-760v240q0 17 11.5 28.5T480-480Z"/></svg>
</span>
<div class="flexy-textfield__filled"></div>
</div>
<br />
<label for="textfield-6" style="line-height: 2">Outlined</label>
<div
class="flexy-textfield flexy-textfield--outlined flexy-textfield--with-trailing-icon"
>
<input type="text" placeholder="Search" id="textfield-6" />
<span class="flexy-textfield__trailing-icon material-symbol">
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24" role="img" aria-label="mic"><path d="M480-400q-50 0-85-35t-35-85v-240q0-50 35-85t85-35q50 0 85 35t35 85v240q0 50-35 85t-85 35Zm0-240Zm-40 480v-83q-92-13-157.5-78T203-479q-2-17 9-29t28-12q17 0 28.5 11.5T284-480q14 70 69.5 115T480-320q72 0 127-45.5T676-480q4-17 15.5-28.5T720-520q17 0 28 12t9 29q-14 91-79 157t-158 79v83q0 17-11.5 28.5T480-120q-17 0-28.5-11.5T440-160Zm40-320q17 0 28.5-11.5T520-520v-240q0-17-11.5-28.5T480-800q-17 0-28.5 11.5T440-760v240q0 17 11.5 28.5T480-480Z"/></svg>
</span>
<div class="flexy-textfield__outlined"></div>
</div>
You can use a floating label to display some short label directly over the input element. Always use short and descriptive text for floating labels. The label will be floated when the input gets focused or it’s not empty.
<div class="flex-column" style="gap: 16px">
<div
class="flexy-textfield flexy-textfield--filled flexy-textfield--with-floating-label"
>
<input type="text" placeholder="Enter a unique username" id="textfield-7" />
<div class="flexy-textfield__filled">
<label for="textfield-7" class="flexy-textfield__floating-label"
>Username</label
>
</div>
</div>
<div
class="flexy-textfield flexy-textfield--outlined flexy-textfield--with-floating-label"
>
<input type="text" placeholder="Enter a unique username" id="textfield-8" />
<div class="flexy-textfield__outlined">
<div class="flexy-textfield__outlined-notch">
<label for="textfield-8" class="flexy-textfield__floating-label"
>Username</label
>
</div>
</div>
</div>
</div>
<div class="flex-column" style="gap: 16px;">
<div
class="flexy-textfield flexy-textfield--filled flexy-textfield--with-floating-label flexy-textfield--with-leading-icon"
>
<input type="text" placeholder="Enter a unique username" id="textfield-9" />
<span class="flexy-textfield__leading-icon material-symbol">
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24" role="img" aria-label="person"><path d="M480-480q-66 0-113-47t-47-113q0-66 47-113t113-47q66 0 113 47t47 113q0 66-47 113t-113 47ZM160-240v-32q0-34 17.5-62.5T224-378q62-31 126-46.5T480-440q66 0 130 15.5T736-378q29 15 46.5 43.5T800-272v32q0 33-23.5 56.5T720-160H240q-33 0-56.5-23.5T160-240Zm80 0h480v-32q0-11-5.5-20T700-306q-54-27-109-40.5T480-360q-56 0-111 13.5T260-306q-9 5-14.5 14t-5.5 20v32Zm240-320q33 0 56.5-23.5T560-640q0-33-23.5-56.5T480-720q-33 0-56.5 23.5T400-640q0 33 23.5 56.5T480-560Zm0-80Zm0 400Z"/></svg>
</span>
<div class="flexy-textfield__filled">
<label for="textfield-9" class="flexy-textfield__floating-label"
>Username</label
>
</div>
</div>
<div
class="flexy-textfield flexy-textfield--outlined flexy-textfield--with-floating-label flexy-textfield--with-leading-icon"
>
<input
type="text"
placeholder="Enter a unique username"
id="textfield-10"
/>
<span class="flexy-textfield__leading-icon material-symbol">
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24" role="img" aria-label="person"><path d="M480-480q-66 0-113-47t-47-113q0-66 47-113t113-47q66 0 113 47t47 113q0 66-47 113t-113 47ZM160-240v-32q0-34 17.5-62.5T224-378q62-31 126-46.5T480-440q66 0 130 15.5T736-378q29 15 46.5 43.5T800-272v32q0 33-23.5 56.5T720-160H240q-33 0-56.5-23.5T160-240Zm80 0h480v-32q0-11-5.5-20T700-306q-54-27-109-40.5T480-360q-56 0-111 13.5T260-306q-9 5-14.5 14t-5.5 20v32Zm240-320q33 0 56.5-23.5T560-640q0-33-23.5-56.5T480-720q-33 0-56.5 23.5T400-640q0 33 23.5 56.5T480-560Zm0-80Zm0 400Z"/></svg>
</span>
<div class="flexy-textfield__outlined">
<div class="flexy-textfield__outlined-notch">
<label for="textfield-10" class="flexy-textfield__floating-label"
>Username</label
>
</div>
</div>
</div>
</div>
<div class="flex-column" style="gap: 16px;">
<div
class="flexy-textfield flexy-textfield--filled flexy-textfield--with-floating-label"
>
<input type="text" placeholder="example.com" id="textfield-11" />
<span class="flexy-textfield__prefix-text">https://</span>
<div class="flexy-textfield__filled">
<label for="textfield-11" class="flexy-textfield__floating-label"
>Enter Domain</label
>
</div>
</div>
<div
class="flexy-textfield flexy-textfield--outlined flexy-textfield--with-floating-label"
>
<input type="text" placeholder="example.com" id="textfield-12" />
<span class="flexy-textfield__prefix-text">https://</span>
<div class="flexy-textfield__outlined">
<div class="flexy-textfield__outlined-notch">
<label for="textfield-12" class="flexy-textfield__floating-label"
>Enter Domain</label
>
</div>
</div>
</div>
</div>
<script>
document.querySelectorAll('#textfield-11,#textfield-12').forEach((input) => {
input.addEventListener('input', () => {
if (!input.value || /^([a-z0-9-]+\.)+[a-z]+.$/.test(input.value)) {
input.setCustomValidity('');
} else {
input.setCustomValidity('Enter valid domain');
}
});
});
</script>
<div class="flex-column" style="gap: 16px;">
<div
class="flexy-textfield flexy-textfield--filled flexy-textfield--with-floating-label"
>
<input
type="text"
placeholder=" "
id="textfield-13"
style="text-align: right;"
/>
<span class="flexy-textfield__suffix-text">@mail.com</span>
<div class="flexy-textfield__filled">
<label for="textfield-13" class="flexy-textfield__floating-label"
>Email</label
>
</div>
</div>
<div
class="flexy-textfield flexy-textfield--outlined flexy-textfield--with-floating-label"
>
<input
type="text"
placeholder=" "
id="textfield-14"
style="text-align: right;"
/>
<span class="flexy-textfield__suffix-text">@mail.com</span>
<div class="flexy-textfield__outlined">
<div class="flexy-textfield__outlined-notch">
<label for="textfield-14" class="flexy-textfield__floating-label"
>Email</label
>
</div>
</div>
</div>
</div>
<script>
document.querySelectorAll('#textfield-13,#textfield-14').forEach((input) => {
input.addEventListener('input', () => {
if (!input.value || /^[a-zA-Z0-9-_=\+]+$/.test(input.value)) {
input.setCustomValidity('');
} else {
input.setCustomValidity('Enter valid email address');
}
});
});
</script>
Supporting text can be used to display some important information or error messages to users. In this example, simple password validation is used to display an error message in the supporting text.
<div class="flex-column" style="gap: 12px">
<div
class="flexy-textfield flexy-textfield--filled flexy-textfield--with-floating-label flexy-textfield--with-supporting-text flexy-textfield--with-leading-icon flexy-textfield--with-trailing-icon"
>
<span class="flexy-textfield__leading-icon material-symbol">
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24" role="img" aria-label="password"><path d="M120-280h720q17 0 28.5 11.5T880-240q0 17-11.5 28.5T840-200H120q-17 0-28.5-11.5T80-240q0-17 11.5-28.5T120-280Zm40-222-19 34q-6 11-18 14t-23-3q-11-6-14-18t3-23l19-34H70q-13 0-21.5-8.5T40-562q0-13 8.5-21.5T70-592h38l-19-32q-6-11-3-23t14-18q11-6 23-3t18 14l19 32 19-32q6-11 18-14t23 3q11 6 14 18t-3 23l-19 32h38q13 0 21.5 8.5T280-562q0 13-8.5 21.5T250-532h-38l19 34q6 11 3 23t-14 18q-11 6-23 3t-18-14l-19-34Zm320 0-19 34q-6 11-18 14t-23-3q-11-6-14-18t3-23l19-34h-38q-13 0-21.5-8.5T360-562q0-13 8.5-21.5T390-592h38l-19-32q-6-11-3-23t14-18q11-6 23-3t18 14l19 32 19-32q6-11 18-14t23 3q11 6 14 18t-3 23l-19 32h38q13 0 21.5 8.5T600-562q0 13-8.5 21.5T570-532h-38l19 34q6 11 3 23t-14 18q-11 6-23 3t-18-14l-19-34Zm320 0-19 34q-6 11-18 14t-23-3q-11-6-14-18t3-23l19-34h-38q-13 0-21.5-8.5T680-562q0-13 8.5-21.5T710-592h38l-19-32q-6-11-3-23t14-18q11-6 23-3t18 14l19 32 19-32q6-11 18-14t23 3q11 6 14 18t-3 23l-19 32h38q13 0 21.5 8.5T920-562q0 13-8.5 21.5T890-532h-38l19 34q6 11 3 23t-14 18q-11 6-23 3t-18-14l-19-34Z"/></svg>
</span>
<input type="password" id="textfield-15" minlength="8" placeholder=" " />
<span class="flexy-textfield__trailing-icon material-symbol">
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24" role="img" aria-label="visibility"><path d="M480-320q75 0 127.5-52.5T660-500q0-75-52.5-127.5T480-680q-75 0-127.5 52.5T300-500q0 75 52.5 127.5T480-320Zm0-72q-45 0-76.5-31.5T372-500q0-45 31.5-76.5T480-608q45 0 76.5 31.5T588-500q0 45-31.5 76.5T480-392Zm0 192q-134 0-244.5-72T61-462q-5-9-7.5-18.5T51-500q0-10 2.5-19.5T61-538q64-118 174.5-190T480-800q134 0 244.5 72T899-538q5 9 7.5 18.5T909-500q0 10-2.5 19.5T899-462q-64 118-174.5 190T480-200Zm0-300Zm0 220q113 0 207.5-59.5T832-500q-50-101-144.5-160.5T480-720q-113 0-207.5 59.5T128-500q50 101 144.5 160.5T480-280Z"/></svg>
</span>
<div class="flexy-textfield__filled">
<label for="textfield-15" class="flexy-textfield__floating-label">
<span>Password</span>
</label>
</div>
<div class="flexy-textfield__supporting-text">Enter a secure password</div>
</div>
</div>
<script type="module">
const input = document.querySelector('input#textfield-15');
const supportingText = document.querySelector(
'#textfield-15 ~ .flexy-textfield__supporting-text',
);
const trailingIcon = document.querySelector(
'#textfield-15 ~ .flexy-textfield__trailing-icon',
);
trailingIcon.addEventListener('click', () => {
input.type = input.type == 'password' ? 'text' : 'password';
});
function checkPassword(password, minLength) {
if (password.length < minLength) {
return 'Password must contain at least 8 characters';
} else if (!/[a-zA-Z]/.test(password)) {
return 'Password must contain at least one letter';
} else if (!/[0-9]/.test(password)) {
return 'Password must contain at least one digit';
} else if (password.includes(' ')) {
return 'Password cannot contains spaces';
} else {
return '';
}
}
input.addEventListener('input', () => {
if (input.value) {
const error = checkPassword(input.value, input.minLength);
if (error) {
supportingText.textContent = error;
input.setCustomValidity(error);
} else {
supportingText.textContent = 'Your password look great';
input.setCustomValidity('');
}
} else {
supportingText.textContent = 'Enter a secure password';
input.setCustomValidity('');
}
});
</script>
flexy-textfieldflexy-textfield--filledflexy-textfield--outlinedflexy-textfield--with-floating-labelflexy-textfield--with-leading-iconflexy-textfield--with-trailing-iconcontainer-heightcontainer-paddingcontainer-shapeplaceholder-coloricon-leading-spacingicon-trailing-spacingicon-leading-marginicon-trailing-marginicon-coloricon-hovered-coloricon-focused-coloricon-sizelabel-floating-scalelabel-floating-top-marginlabel-floating-transition-durationlabel-floating-transition-easingprefix-text-marginprefix-text-colorsuffix-text-marginsuffix-text-colorsupporting-text-sizesupporting-text-top-marginsupporting-text-left-marginsupporting-help-text-colorsupporting-error-text-colorenabled-fill-colorenabled-outline-colorenabled-outline-widthenabled-label-colorhovered-fill-colorhovered-outline-colorhovered-label-colorfocused-fill-colorfocused-outline-colorfocused-outline-widthfocused-label-colorinvalid-outline-widthinvalid-outline-colorinvalid-label-colorLast modified: Oct 19, 2025: refactor(docs): Reorganize the folder structure of component examples (8271c2e)