Check out new web design product – Material Websites Toolkit for Figma
Send us your questions or customization on demand requests
We used to reply ASAP
This overview begins from classic material text fields. Every style is available: default, disabled, focused, error, iconic. Recommended to use in mobile apps in terms of Google guidelines.
Stroked text fields
Stroked or outline inputs is the best choice for desktop applications instead of classic material stroked. If you wish to resize the height, for example, just drag the bottom edge to desired dimensions. The caption will be centered automatically.
Perfect fit for pages with different from white background color. It's either a good idea to mix filled inputs with stroked. For example you can use focused filled input to increase the meaning of action among inactive outline text fields. Be creative! Combine.
We are always open to customer's feedback and inquires. That's why you'll meet with caption-inside inputs with coming soon 1.4 update. Stay tuned!
Finally, multicomponent-based approach is a perfect fit for inputs case also. Stand by to grab it in upcoming v1.4 of Material Design System for Figma.
You can quickly change this icon to any from 300+ material icons included in the system
This outline stroke made as component, e.g. you can execute mass edit for all stroked inputs at once
Actually you can switch the magnifier icon to any other to obtain "Right Iconic Filled Input" within few clicks
Background for filled inputs connected with master-component "Colors / Accent". Customize it once to recolor all the inputs instantly.
Icon recommended to use as meaning enhancer. Otherwise, simply make it invisible in layers column.
This is predefined multicomponent. It scales unlimited to the bottom while list rows appearing.