menu
Dark Mode
backgroundLayer 1
preact-material-components
Components and their props
  • TextField
    • fullwidth true/false
      Makes the textfield full width.
    • textarea true/false
      Toggles between TextArea and TextField.
    • type text, password, date, time, etc.
      Type of HTML textfield (defaults to 'text')
    • dense true/false
      Use a dense font
    • box true/false
      Enclose label and input in a transparent rectangular fill
    • disabled true/false
      Disables the input
    • helperText help text
      Include an help text that is useful for providing supplemental information to users, as well for validation messages
    • helperTextPersistent true/false
      Makes the help text always visible
    • helperTextValidationMsg true/false
      Provide styles for using the help text as a validation message
Sample code
import {h, Component} from 'preact';
import TextField from 'preact-material-components/TextField';
import 'preact-material-components/TextField/style.css';

export default class TextFieldPage extends Component {
  render(){
    return (
      <div>
        <TextField label="Textarea tag"/>
      </div>
    );
  }
}
Original documentation
This component encapsulates mdc-text-field. You can refer to its documentation here.
Demo
Default
Hi -
Textarea
Password
With help text
With persistent help text
Dense
Disabled
Link state
State: