<SpacedGroup direction="vertical">
    <TextField hintText="Default" stretch />
    <TextField hintText="Dirty" dirty stretch />
    <TextField hintText="Disabled" disabled stretch />
    <TextField hintText="Focused" stretch focused />
    <TextField hintText="Error" error="invalid value" stretch />
    <TextField hintText="Multiline" multiline stretch />
  
</Playground>

<SpacedGroup direction="vertical">
    <TextField hintText="Default" multiline />
    <TextField hintText="Disabled" multiline disabled />
    <TextField hintText="Dirty" multiline dirty />
    <TextField hintText="Error" multiline error="Error" />
    <TextField hintText="Prepend Icon" multiline prependIcon="item" />
    <FormControlLabel
      label="with a label"
      control={<TextField multiline stretch />}
    />
  
</Playground>

<SpacedGroup direction="vertical">
    <TextField prependIcon="item" />
    <FormControlLabel
      label="with a label"
      control={<TextField prependIcon="item" stretch />}
    />
    <TextField fullWidth prependIcon="item" />
    <TextField fullWidth prependIcon={<HomeIcon />} />
    <TextField fullWidth prependIcon="item" multiline />
    <TextField fullWidth appendIcon="item" />
    <TextField fullWidth appendIcon={<HomeIcon />} />
    <TextField fullWidth password />
  
</Playground>

<SpacedGroup direction="vertical">
    <TextField fullWidth password appendIcon={<HomeIcon />} />
    <TextField fullWidth password />
  
</Playground>

<SpacedGroup direction="vertical">
    <FormControlLabel
      label="Label"
      control={<TextField hintText="default" />}
    />
    <FormControlLabel
      label="Label"
      control={<TextField hintText="fullWidth" fullWidth />}
    />
    <FormControlLabel
      label="Label"
      control={<TextField hintText="stretch" stretch />}
    />
  
</Playground>

<SpacedGroup direction="vertical">
    <TextField hintText="Default" inlineEdit />
    <TextField hintText="Disabled" inlineEdit disabled />
    <TextField hintText="Dirty" inlineEdit dirty />
    <TextField
      hintText="Error"
      inlineEdit
      error="You really screwed the pooch"
    />
    <TextField hintText="Loading" inlineEdit loading />
    <TextField hintText="Success" inlineEdit success />
  
</Playground>

{() => {
    class StateManager extends React.Component {
      constructor(props, context) {
        super(props, context)
        this.state = { value: '' }
        this.handleChange = this.handleChange.bind(this)
        this.handleBlur = this.handleBlur.bind(this)
        this.handleFocus = this.handleFocus.bind(this)
      }
      handleChange(event, value) {
        this.setState({ value })
      }
      handleBlur(event) {
        this.setState({ value: event.target.value })
      }
      handleFocus() {
        console.log('focus')
      }
      componentDidMount() {
        this.setState({ value: 'default value on mount...' })
      }
      render() {
        return (
          <div>
            <TextField
              focsued
              onBlur={this.handleBlur}
              onFocus={this.handleFocus}
              defaultValue={this.state.value}
              hintText="https://example.com"
              dirty={false}
              fullWidth
            />
            <div>{this.state.value}
          </div>
        )
      }
    }
    return <StateManager />
  }}
</Playground>