How to use bpk-component-input - 10 common examples

Username
          
        
        
          Password
          
        
        
          Login
        
      
    );
  }
}

Number input
         null}
        />
      ,
      <form>
        Password input
         null}
        /&gt;
      ,
      <form>
        Telephone input
        </form></form>

Password input
         null}
        />
      ,
      <form>
        Telephone input
         null}
        /&gt;
      ,
    ],
    readme: inputReadme,
  },
  {
    id: 'selects',
    title: 'Selects (aka dropdowns)',
    blurb: [
      
        Backpack selects override the default styles in most modern browsers. In</form>

))}
      
      
        {label}
      
      
    
  );
};

import BpkInput, { withOpenEvents } from 'bpk-component-input';
import BpkRouterLink from 'bpk-component-router-link';
import popoverReadme from 'bpk-component-popover/README.md';

import * as ROUTES from '../../constants/routes';
import DocsPageBuilder from '../../components/DocsPageBuilder';
import DocsPageWrapper from '../../components/DocsPageWrapper';
import Paragraph from '../../components/Paragraph';
import IntroBlurb from '../../components/IntroBlurb';
import Code from '../../components/Code';

const loremIpsum = `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer pulvinar leo in gravida varius.
Mauris eget euismod mi. Ut vulputate ex nec consequat sollicitudin. Pellentesque pulvinar ac dolor vel hendrerit.
Maecenas sed felis justo. Proin at tellus in urna molestie blandit. Duis posuere urna nec finibus imperdiet.`;

const EnhancedInput = withOpenEvents(BpkInput);

class PopoverContainer extends Component {
  constructor() {
    super();

    this.state = {
      isOpen: false,
    };
  }

  openPopover = () => {
    this.setState({
      isOpen: true,
    });
  };

*/

import BpkInput, { withOpenEvents } from 'bpk-component-input';
import BpkModal from 'bpk-component-modal';
import BpkPopover from 'bpk-component-popover';
import { cssModules } from 'bpk-react-utils';
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import BpkBreakpoint, { BREAKPOINTS } from 'bpk-component-breakpoint';
import BpkCalendar, { CustomPropTypes } from 'bpk-component-calendar';

import STYLES from './BpkDatepicker.scss';

const getClassName = cssModules(STYLES);

const Input = withOpenEvents(BpkInput);

class BpkDatepicker extends Component {
  constructor(props) {
    super(props);

    this.state = {
      isOpen: props.isOpen,
    };
  }

  onOpen = () => {
    this.setState({
      isOpen: true,
    });
  };

const IconSearchForm = props => {
  const { filterValue, onFilterChange } = props;

  return (
    <form> e.preventDefault()}
      className={getClassName('bpkdocs-icon-search-form')}
    &gt;
      <fieldset>
        Filter
         onFilterChange(e.target.value)}
          placeholder="Filter by name"
        /&gt;
      </fieldset>
    </form>
  );
};

null}
          disabled
        />
      ,
      <form>
        Email input
         null}
        /&gt;
      ,
      <form>
        Number input
        </form></form>

Email input
         null}
        />
      ,
      <form>
        Number input
         null}
        /&gt;
      ,
      <form>
        Password input
        </form></form>

.add('Input', () => (
    
      
    
  ))
  .add('Input with description', () => (