<!-- Radio -->
<label class="input__label flex flex--v-center" for="radio">
    <input type="radio" id="radio" class="input input--radio font-HNL3-s font-HNL2-m js-input"
    name="radio" /><span class="input__control-indicator input__control-indicator--radio"></span>
    <span
    class="input__label-wrap line-height-1 margin-left-s2 ">label</span>
</label>

<!-- Checkbox -->
<label class="input__label flex flex--v-center" for="checkbox">
    <input type="checkbox" id="checkbox" class="input input--checkbox font-HNL3-s font-HNL2-m js-input"
    name="checkbox" /><span class="input__control-indicator input__control-indicator--checkbox"></span>
    <span
    class="input__label-wrap line-height-1 margin-left-s2 ">label</span>
</label>

<!-- Text -->
<label class="input__label flex flex--v-center" for="search">
    <input type="text" id="search" class="input input--text font-HNL3-s font-HNL2-m js-input"
    name="text" placeholder="Search" /><span class="input__label-wrap line-height-1 margin-left-s2 input__label-wrap--hidden">label</span>
</label>

// @flow

import {font, spacing} from '../../../utils/classnames';

export type EventWithInputValue = {
  preventDefault: () => {},
  target: Array<{value: string}>
}

type Props = {|
  inputRef?: ?Function,
  id: string,
  type: string,
  defaultValue: string,
  label: string,
  fontStyles?: {},
  name?: string,
  placeholder?: string,
  disabled?: boolean,
  autofocus?: boolean,
  isLabelHidden?: boolean,
  required?: boolean,
  onChange?: (EventWithInputValue) => void
|}

// `defaultValue` only gets set on initial load for a form.
// After that, it won't get 'naturally' updated because the
// intent was only to set an initial default value.
// We get around this by passing a `key`
// (the value itself) to the parent element.
const HTMLInput = ({
  required,
  inputRef,
  id,
  type,
  name,
  defaultValue,
  placeholder,
  disabled,
  autofocus,
  label,
  isLabelHidden,
  fontStyles = {s: 'HNL3', m: 'HNL2'},
  onChange
}: Props) => (
  <label key={defaultValue} className='input__label flex flex--v-center' htmlFor={id}>
    <input
      required={required}
      ref={inputRef}
      id={id}
      className={`input input--${type} ${font(fontStyles)} js-input`}
      type={type}
      name={name}
      defaultValue={defaultValue}
      placeholder={placeholder}
      disabled={disabled}
      autoFocus={autofocus && !defaultValue}
      onChange={onChange}/>

    {['radio', 'checkbox'].indexOf(type) > -1 &&
      <span className={`input__control-indicator input__control-indicator--${type}`}></span>
    }

    <span className={`input__label-wrap line-height-1 ${spacing({s: 2}, {margin: ['left']})} ${isLabelHidden ? 'input__label-wrap--hidden' : ''}`} dangerouslySetInnerHTML={{__html: label}} />
  </label>
);

export default HTMLInput;
/* Radio */
{
  "label": "label",
  "id": "radio",
  "type": "radio",
  "name": "radio",
  "value": "radio"
}

/* Checkbox */
{
  "label": "label",
  "id": "checkbox",
  "type": "checkbox",
  "name": "checkbox",
  "value": "checkbox"
}

/* Text */
{
  "label": "label",
  "id": "search",
  "type": "text",
  "name": "text",
  "value": null,
  "placeholder": "Search",
  "isLabelHidden": true
}

There are no notes for this item.