Textfield

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-textfield, 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)'}} />