Sha256: 5b995e888a5bfebedf9ce543aab9968738270ade65f7d1861461ceedb4cd3cb0

Contents?: true

Size: 1.43 KB

Versions: 36

Compression:

Stored size: 1.43 KB

Contents

import React from 'react'
import {
  Caption,
  TextInput,
  Title,
} from '../../'

class TextInputDefault extends React.Component {
  state = {
    firstName: '',
  }

  render() {
    const handleOnChange = ({ target }) => this.setState({ firstName: target.value })

    const {
      firstName,
    } = this.state

    return (
      <div>
        <TextInput
            label="First Name"
            placeholder="Enter first name"
            value="Timothy Wenhold"
        />
        <TextInput
            label="Last Name"
            placeholder="Enter last name"
        />
        <TextInput
            label="Phone Number"
            placeholder="Enter phone number"
            type="phone"
        />
        <TextInput
            label="Email Address"
            placeholder="Enter email address"
            type="email"
        />
        <TextInput
            label="Zip Code"
            placeholder="Enter zip code"
            type="number"
        />

        <br />
        <br />

        <Title>{'Event Handler Props'}</Title>

        <br />
        <Caption>{'onChange'}</Caption>

        <br />

        <TextInput
            label="First Name"
            onChange={handleOnChange}
            placeholder="Enter first name"
            value={firstName}
        />

        <If condition={firstName !== ''}>
          {`First name is: ${firstName}`}
        </If>
      </div>
    )
  }
}

export default TextInputDefault

Version data entries

36 entries across 36 versions & 1 rubygems

Version Path
playbook_ui-4.5.1 app/pb_kits/playbook/pb_text_input/docs/_text_input_default.jsx
playbook_ui-4.5.0 app/pb_kits/playbook/pb_text_input/docs/_text_input_default.jsx
playbook_ui-4.4.1 app/pb_kits/playbook/pb_text_input/docs/_text_input_default.jsx
playbook_ui-4.4.0 app/pb_kits/playbook/pb_text_input/docs/_text_input_default.jsx
playbook_ui-4.3.1 app/pb_kits/playbook/pb_text_input/docs/_text_input_default.jsx
playbook_ui-4.3.0 app/pb_kits/playbook/pb_text_input/docs/_text_input_default.jsx
playbook_ui-4.2.0 app/pb_kits/playbook/pb_text_input/docs/_text_input_default.jsx
playbook_ui-4.1.2 app/pb_kits/playbook/pb_text_input/docs/_text_input_default.jsx
playbook_ui-4.1.1 app/pb_kits/playbook/pb_text_input/docs/_text_input_default.jsx
playbook_ui-4.1.0 app/pb_kits/playbook/pb_text_input/docs/_text_input_default.jsx
playbook_ui-4.0.1 app/pb_kits/playbook/pb_text_input/docs/_text_input_default.jsx
playbook_ui-4.0.0 app/pb_kits/playbook/pb_text_input/docs/_text_input_default.jsx
playbook_ui-3.5.0 app/pb_kits/playbook/pb_text_input/docs/_text_input_default.jsx
playbook_ui-3.4.0 app/pb_kits/playbook/pb_text_input/docs/_text_input_default.jsx
playbook_ui-3.3.0 app/pb_kits/playbook/pb_text_input/docs/_text_input_default.jsx
playbook_ui-3.2.0 app/pb_kits/playbook/pb_text_input/docs/_text_input_default.jsx