Input

To use, import from @marvelapp/ui, or @marvelapp/ui-internal for the combined input with label:

import { Input } from '@marvelapp/ui';
import { InputWithLabel } from '@marvelapp/ui-internal';

Size

The <Input /> component has a few sizes available that can be used depending where in the page hierarchy they sit.

<Input size={3} />
<Input size={2} />
<Input size={1} />
<Input size={0} />

Kind

The <Input /> component has a few kinds available that can be used depending on the context of the action being performed.

<Input kind="default" />
<Input kind="error" />
<Input kind="disabled" />
<Input kind="whiteTransparent"  />

With label

Most times you’ll need to attach labels to your inputs. Make sure to pass down an id which is going to make the label clickable and focus the input on click.

<InputWithLabel
  id="email-address"
  label="Email address"
  placeholder="Placeholder text adds clarification when needed"
/>