A Material Design text field


1536.3.16 years ago6 years agoMinified + gzip package size for @cyclic/molecule-input in KB



A Material Design text field.


npm version

$ npm install @cyclic/molecule-input


The examples assume basic knowledge of CycleJS.

var input = Input({DOM, props$: Rx.Observable.just({
  label: `Input label`,

This will render an input with the label "Input label".

For more examples, see the demo source code, and make sure to check out the API documentation.


Clone the repository and run from the command line:

$ npm start

Then open demo/index.html in your browser.

You can also see a live demo here.


After you have installed the package, you can start using the components.


First, you need to require the component you want to use.

var Input = require('@cyclic/molecule-input').Input;

Here, we have required the Input component from the package. Next, we will actually use it.

var myTextField = Input({DOM, props$: Rx.Observable.just({
  label: `My text field`

The ES6 Way

First, you need to import the component you want to use.

import {Input} from '@cyclic/molecule-input';

Here, we have imported the Input component from the package. Next, we will actually use it.

const myTextField = Input({DOM, props$: Rx.Observable.just({
  label: `My text field`

Styling Components

The components come with styles in two flavors: transformed styles and raw styles.

Check out the API documentation for available CSS classes and variables.

Using Transformed Styles

The transformed styles are ready-to-go styles, which you can use directly in the browser. The common way is to simply copy the stylesheets from the library. You’ll find the transformed stylesheets in the lib directory.

If you don’t want all the styles for all the components, which is in lib/index.css, you can find specific stylesheets in the component subdirectories. However, using stylesheets from different components can lead to style declaration duplication.

Style declaration duplication can also occur if you use components in orchestration with other Cyclic Materials packages. We’ll see next how using raw styles avoids this.

Using Raw Styles

Cyclic Materials have been built with a certain amount of flexibility in mind. The raw styles are written for cssnext, which uses the latest CSS syntax.

Using raw styles is the recommended way, as it avoids unnecessary duplication of style declarations. It does, however, require a little bit more setup in your project.

To use the raw styles, your project needs to use the cssnext transpiler.

The raw styles are found in the src directory. In your CSS stylesheet, you simply import the raw styles you need, for example:

@import '@cyclic/molecule-input/src/Input

You then need to have a process that transpiles your CSS. You can use cssnext using CLI, as a JavaScript library, as a PostCSS plugin, or through other tools.

Take a look at this package’s package.json file scripts to see how Cyclic Materials use cssnext as a PostCSS plugin.


MIT © Cyclic Materials

Build Status Code Climate Dependency Status devDependency Status

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.