Field

Installation

yarn add @chantelle/field

Styles

<link rel="stylesheet" href="node_modules/@chantelle/field/dist/styles.css">

Note: you can import the CSS directly into your project if your bundler supports it:

 import '@chantelle/field/dist/styles.css';

Components

The sub-components used by Field are also exported and can be used separately.

import { Label, Input } from '@chantelle/field';

<Label htmlFor='custom-input'>Some label text</Label>
<Input id='custom-input' />

CSS API

<label class="pl-label" for="field-name">Name</label>
<input type="text" class="pl-field pl-field--text" id="field-name" />

Types

To change the type of an input, just use any valid value for the type DOM attribute. Don't forget to update the variation class pl-field--{type}, otherwise you might not apply any specific style applied to that input type.

<label class="pl-label" for="user-email">Email</label>
<input type="email" class="pl-field pl-field--email" id="user-email" />