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
    • outlined true/false
      Adds an outline around the TextField
    • 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
    • outerStyles like (p)react's style prop
      Applies styles to the whole element
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 -
<TextField
  label="Your name"
  onKeyUp={e => {
    this.setState({
      name: e.target.value
    });
  }}
/>{" "}
Hi - {this.state.name}
Textarea
<TextField textarea={true} label="Textarea tag" />
Password
<TextField type="password" label="Enter a password" />
With help text
<TextField label="Help text" helpertext="This is the helptext" />
With persistent help text
<TextField
  label="Persistent help text"
  helperText="This is the helperText"
  helperTextPersistent
/>
Dense
<TextField label="Dense" dense />
Outlined
<TextField label="Outlined" outlined />
Disabled
<TextField label="Disabled" disabled />
Controlled
State:
<TextField
  label="State"
  value={this.state.value}
  onInput={e => this.setState({ value: e.target.value })}
/>
State: {this.state.value}
outerStyle
<TextField label="outerStyle" outerStyle={{transform: 'rotate(45deg)'}} />