InputField

<InputField /> is a wrapper component for an <Input /> that includes label and error messages.

It can be compared to the form-control class from Bootstrap.

Copy
import { InputField, Input } from 'minerva-ui';

Label 
() => {
  const [name, setName] = useState('');
  const [error, setError] = useState('');

  return (
    <InputField label="Label" errorText={error}>
      <Input
        placeholder="Basic Input"
        value={name}
        onBlur={!name ? () => setError('This field cannot be empty') : null}
        onChange={e => {
          setError('');
          setName(e.target.value);
        }}
      ></Input>
    </InputField>
  );
};
() => {
  const [name, setName] = useState('');
  const [error, setError] = useState('');
  return (
    <InputField label="Label" errorText={error}>
      <Input
        placeholder="Basic Input"
        value={name}
        onBlur={!name ? () => setError('This field cannot be empty') : null}
        onChange={e => {
          setError('');
          setName(e.target.value);
        }}
      ></Input>
    </InputField>
  );
};

Input Field with Error Message#

Label 
() => {
  const [name, setName] = useState('');
  const [error, setError] = useState('');

  return (
    <InputField
      label="Label"
      htmlFor="basicInput"
      errorText={error}
      errorStyles={{ color: '#FF8247', size: '16px' }}
    >
      <Input
        id="basicInput"
        placeholder="Basic Input"
        value={name}
        onBlur={!name ? () => setError('This field cannot be empty') : null}
        onChange={e => {
          setError('');
          setName(e.target.value);
        }}
      ></Input>
    </InputField>
  );
};
() => {
  const [name, setName] = useState('');
  const [error, setError] = useState('');
  return (
    <InputField
      label="Label"
      htmlFor="basicInput"
      errorText={error}
      errorStyles={{ color: '#FF8247', size: '16px' }}
    >
      <Input
        id="basicInput"
        placeholder="Basic Input"
        value={name}
        onBlur={!name ? () => setError('This field cannot be empty') : null}
        onChange={e => {
          setError('');
          setName(e.target.value);
        }}
      ></Input>
    </InputField>
  );
};

Required Input Field#

Label 
*
() => {
  const [name, setName] = useState('');
  const [error, setError] = useState('');

  return (
    <InputField
      label="Label"
      htmlFor="basicInput"
      isRequired
      requiredMarkerColor="#FF6347"
      errorText={error}
    >
      <Input
        id="basicInput"
        placeholder="Basic Input"
        value={name}
        onBlur={!name ? () => setError('This field cannot be empty') : null}
        onChange={e => {
          setError('');
          setName(e.target.value);
        }}
      ></Input>
    </InputField>
  );
};
() => {
  const [name, setName] = useState('');
  const [error, setError] = useState('');
  return (
    <InputField
      label="Label"
      htmlFor="basicInput"
      isRequired
      requiredMarkerColor="#FF6347"
      errorText={error}
    >
      <Input
        id="basicInput"
        placeholder="Basic Input"
        value={name}
        onBlur={!name ? () => setError('This field cannot be empty') : null}
        onChange={e => {
          setError('');
          setName(e.target.value);
        }}
      ></Input>
    </InputField>
  );
};

Props#

These are props related to the Input Field component.