Form Group

Close

import React from 'react'

import FormGroup from '../_form_group'
import TextInput from '../../pb_text_input/_text_input'

const FormGroupDefault = (props) => (
  <div>
    <FormGroup>
      <TextInput
          label="First Name"
          placeholder="Enter First Name"
          {...props}
      />
      <TextInput
          label="Middle Intial"
          placeholder="Enter Middle Initial"
          {...props}
      />
      <TextInput
          label="Last Name"
          placeholder="Enter Last Name"
          {...props}
      />
    </FormGroup>
  </div>
)

export default FormGroupDefault

Close

import React from 'react'

import Button from '../../pb_button/_button'
import FormGroup from '../../pb_form_group/_form_group'
import TextInput from '../../pb_text_input/_text_input'

const FormGroupButton = (props) => (
  <div>
    <div>
      <FormGroup>
        <TextInput
            label="With Label"
            placeholder="Search"
            {...props}
        />
        <Button
            onClick={() => alert('Button Clicked!')}
            text="Submit"
            variant="secondary"
            {...props}
        />
      </FormGroup>
    </div>
    <br />
    <div>
      <FormGroup>
        <TextInput
            placeholder="Search"
            {...props}
        />
        <Button
            onClick={() => alert('Button Clicked!')}
            text="Submit"
            variant="secondary"
            {...props}
        />
      </FormGroup>
    </div>
  </div>
)

export default FormGroupButton

Close

import React from 'react'

import FormGroup from '../_form_group'
import TextInput from '../../pb_text_input/_text_input'
import Button from '../../pb_button/_button'

const FormGroupFullWidth = (props) => (
  <div>
    <div>
      <FormGroup fullWidth>
        <TextInput
            label="First Name"
            placeholder="Enter First Name"
            {...props}
        />
        <TextInput
            label="Middle Intial"
            placeholder="Enter Middle Initial"
            {...props}
        />
        <TextInput
            label="Last Name"
            placeholder="Enter Last Name"
            {...props}
        />
      </FormGroup>
    </div>
    <br />
    <div>
      <FormGroup fullWidth>
        <TextInput
            placeholder="Search"
            {...props}
        />
        <Button
            onClick={() => alert('Button Clicked!')}
            text="Submit"
            variant="secondary"
            {...props}
        />
      </FormGroup>
    </div>
  </div>
)

export default FormGroupFullWidth

Close

import React from 'react'

import FormGroup from '../_form_group'

import DatePicker from '../../pb_date_picker/_date_picker'
import TextInput from '../../pb_text_input/_text_input'

const FormGroupDatePicker = (props) => (
  <div>
    <FormGroup>
      <TextInput
          label="Event"
          placeholder="Event Name"
          {...props}
      />
      <DatePicker
          label="event date"
          pickerId="date-picker-default"
          {...props}
      />
    </FormGroup>
  </div>
)

export default FormGroupDatePicker

Close

import React from 'react'

import FormGroup from '../_form_group'

import Select from '../../pb_select/_select'
import TextInput from '../../pb_text_input/_text_input'

const FormGroupSelect = (props) => {
  const options = [
    { value: 'Country' },
    { value: 'Pop' },
    { value: 'Rock' },
    { value: 'Hip-Hop/Rap' },
    { value: 'Classical' },
    { value: 'Gospel' },
    { value: 'Alternative' },
    { value: 'Indie' },
    { value: 'Other' },
  ]

  return (
    <div>
      <FormGroup>
        <TextInput
            label="Artist"
            placeholder="Enter Artist Name"
            {...props}
        />
        <Select
            blankSelection="Genre"
            options={options}
            {...props}
        />
      </FormGroup>
    </div>
  )
}

export default FormGroupSelect

Close

import React, { useState } from 'react'

import FormGroup from '../../pb_form_group/_form_group'
import SelectableCard from '../../pb_selectable_card/_selectable_card'

const FormGroupSelectableCard = (props) => {
  const [value, setValue] = useState('')

  const handleSelect = (event) => {
    setValue(event.target.value)
  }

  return (
    <div>
      <FormGroup>
        <SelectableCard
            checked={value === 'cat'}
            inputId="cat1"
            multi={false}
            name="animal"
            onChange={handleSelect}
            value="cat"
            {...props}
        >
          {'Cat'}
        </SelectableCard>

        <SelectableCard
            checked={value === 'dog'}
            inputId="dog1"
            multi={false}
            name="animal"
            onChange={handleSelect}
            value="dog"
            {...props}
        >
          {'Dog'}
        </SelectableCard>
      </FormGroup>
    </div>
  )
}

export default FormGroupSelectableCard

Close

import React, { useState } from 'react'

import FormGroup from '../_form_group'
import SelectableCardIcon from '../../pb_selectable_card_icon/_selectable_card_icon'

const FormGroupSelectableCardIcon = (props) => {
  const [selectedFormat, toggleFormat] = useState(null)

  return (
    <div>
      <FormGroup>
        <SelectableCardIcon
            checked={selectedFormat === 'basketball'}
            icon="basketball-ball"
            inputId={7}
            name="select"
            onChange={() => toggleFormat('basketball')}
            titleText="Basketball"
            value="basketball"
            {...props}
        />
        <SelectableCardIcon
            checked={selectedFormat === 'football'}
            icon="football-ball"
            inputId={8}
            name="select"
            onChange={() => toggleFormat('football')}
            titleText="Football"
            value="football"
            {...props}
        />
      </FormGroup>
    </div>
  )
}

export default FormGroupSelectableCardIcon