Forms and Inputs

These components are the basic building blocks for creating forms. Each of these elements can be used individually throughout the site, however it's recommended to use the field components when building forms in order to take advantage of their accessibility and responsive features.

const Form = require('gitbook-styleguide/lib/Form');
const Input = require('gitbook-styleguide/lib/Input');

Layout

<Form>
<Form.Group>
<label>Name</label>
<Input name="name" placeholder="John" />
</Form.Group>
<Form.Group>
<label>Email address</label>
<Input name="email" placeholder="john@doe.com" />
</Form.Group>
<Form.Group>
<label>Message</label>
<Textarea placeholder="Some message" />
</Form.Group>
<Form.Actions>
<Button type="submit" style="primary">Submit</Button>
<Button type="cancel" style="secondary">Cancel</Button>
</Form.Actions>
</Form>

Sizing

Make inputs smaller, larger, or full-width with an additional property.
<Input size="lg" placeholder="Large input" />
<Input size="md" placeholder="Normal input" />
<Input size="sm" placeholder="Small input" />
<Input size="xs" placeholder="Extra small input" />

States

States can be used to signal an error on a field.
<Form>
<Form.Group error>
<label>Name</label>
<Input name="name" placeholder="This field has an error" />
</Form.Group>
<Form.Group>
<label>Email address</label>
<Input name="email" disabled placeholder="This field is disabled" />
</Form.Group>
<Form.Group>
<label>Email address</label>
<Input name="email" focus placeholder="This field is focus" />
</Form.Group>
<Form.Group>
<label>Email address</label>
<Input name="email" readOnly placeholder="This field is read only" />
</Form.Group>
</Form>

Checkbox

<Form>
<Checkbox name="something" checked>
Something to check (with control state)
</Checkbox>
<Checkbox name="something" size="lg">
Something to check (Large)
</Checkbox>
<Checkbox name="something" direction="right">
Something to check (On the right)
</Checkbox>
</Form>

Input Groups

Extend form controls by adding text or buttons before, after, or on both sides of any text-based input.
@
<Form>
<Form.Group>
<label>Email address</label>
<Input.Group>
<Input.GroupAddon>
@
</Input.GroupAddon>
<Input name="email" placeholder="Enter an email" />
</Input.Group>
</Form.Group>
</Form>

Select

HTML select are replaced by an input allowing more options (search, multiple values, custom renderers with icons, etc).
<Select
name="language"
search={false}
options={[
'French',
'English'
]}
/>

Complex Select

Select has different properties for customizing the rendering and the behaviour.
<Select
name="countries"
filter={(query, option) => option.label.indexOf(query) >= 0}
component={({option}) => <span>{option.label}</span>}
options={[
{ id: 'US', label: 'United States' },
{ id: 'FR', label: 'France' },
{ id: 'UK', label: 'United Kingdom' }
]}
/>