@chantelle/pl-field

The Field component of the Chantelle Pattern Library

Usage no npm install needed!

<script type="module">
  import chantellePlField from 'https://cdn.skypack.dev/@chantelle/pl-field';
</script>

README

Field

Installation

yarn add @chantelle/pl-field

Styles

<link rel="stylesheet" href="node_modules/@chantelle/pl-field/build/css/main.css">

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

 import '@chantelle/pl-field/build/css/main.css';

Components

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

import { Label, Input } from '@chantelle/pl-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" />