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.

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

Preview

Label

Source

() => { const [name, setName] = React.useState(''); const [error, setError] = React.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] = React.useState('');
  const [error, setError] = React.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

Preview

Label

Source

() => { const [name, setName] = React.useState(''); const [error, setError] = React.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] = React.useState('');
  const [error, setError] = React.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

Preview

Label

*

Source

() => { const [name, setName] = React.useState(''); const [error, setError] = React.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] = React.useState('');
  const [error, setError] = React.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.

Name	Type	Is Required	Default	Description
label	string	optional	none	Label for input field
errorText	string	optional	none	Label for input field
isRequired	string	optional	none	Shows required marker