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

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

<SpacedGroup direction="vertical">
    <FormControlLabel
      stretch
      label="with a label"
      control={<PhoneNumberField hintText="default" />}
    />
    <FormControlLabel
      stretch
      label="with a label"
      control={<PhoneNumberField hintText="fullWidth" fullWidth />}
    />
    <FormControlLabel
      stretch
      label="with a label"
      control={<PhoneNumberField hintText="stretch" stretch />}
    />
  
</Playground>

<SpacedGroup direction="vertical">
    <PhoneNumberField hintText="Default" inlineEdit />
    <PhoneNumberField hintText="Disabled" inlineEdit disabled />
    <PhoneNumberField hintText="Dirty" inlineEdit dirty />
    <PhoneNumberField
      hintText="Error"
      inlineEdit
      error="You really screwed the pooch"
    />
    <PhoneNumberField hintText="Loading" inlineEdit loading />
    <PhoneNumberField 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)
    }
    handleChange(event, value) {
      this.setState({ value })
    }
    render() {
      return (
        <PhoneNumberField
          focsued
          value={this.state.value}
          onChange={this.handleChange}
        />
      )
    }
  }
  return <StateManager />
}