joyent-portal/packages/ui-toolkit/src/form/usage-input.md

Input > Email

const React = require('react');
const { default: FormGroup } = require('./group');
const { default: Label } = require('./label');
const { default: Input } = require('./input');

<FormGroup>
  <Label>Username</Label>
  <Input placeholder="Example: JarJarBinks" type="email" />
</FormGroup>;

Input > Disabled

const React = require('react');
const { default: FormGroup } = require('./group');
const { default: Label } = require('./label');
const { default: Input } = require('./input');

<FormGroup>
  <Label disabled>Username</Label>
  <Input disabled placeholder="Example: JarJarBinks" type="email" />
</FormGroup>;

Input > Error

const React = require('react');
const { default: FormGroup } = require('./group');
const { default: Label } = require('./label');
const { default: FormMeta } = require('./meta');
const { default: Input } = require('./input');

<FormGroup>
  <Label>Email Address</Label>
  <Input placeholder="Enter email" type="email" />
  <FormMeta error>Unexpected children error!</FormMeta>
</FormGroup>;

Input > Warning

const React = require('react');
const { default: FormGroup } = require('./group');
const { default: Label } = require('./label');
const { default: FormMeta } = require('./meta');
const { default: Input } = require('./input');

<FormGroup>
  <Label>Email Address</Label>
  <Input placeholder="Enter email" type="email" />
  <FormMeta warning>Unexpected children warning!</FormMeta>
</FormGroup>;

Input > Success

const React = require('react');
const { default: FormGroup } = require('./group');
const { default: Label } = require('./label');
const { default: FormMeta } = require('./meta');
const { default: Input } = require('./input');

<FormGroup>
  <Label>Email Address</Label>
  <Input placeholder="Enter email" type="email" />
  <FormMeta success>Unexpected children success!</FormMeta>
</FormGroup>;