Form

Form elements package contains various UI components for forms.

Demo

Install

yarn add @humblejs/form

Style

Import all the styling

@import '@humblejs/form/dist/css/styles.scss';

or import separately

@import '@humblejs/form/dist/css/form/input.scss';
@import '@humblejs/form/dist/css/form/checkbox.scss';

Usage

You can import all the packages

import Form from '@humblejs/form'

...

<Form.Input />

or you can import separately

import { Input } from '@humblejs/form'

...

<Input />

Input

| Description | Value | |-----------|----------| | Base component | <div> | | Base class | hjs-form__input |

| Props | Type / Description | Is Required? | Default | |-----------|----------|-------------|-------------| | name | stringName of the text input element | YES | | | icon | Icon from @humblejs/icon | NO | | | hasError | boolIf true it adds has-error class | NO | FALSE |

Checkbox

| Description | Value | |-----------|----------| | Base component | <li> | | Base class | hjs-form__checkbox | | Notes | Must be inside <ul> |

| Props | Type | Is Required? | Default | |-----------|----------|-------------|-------------| | name | stringName of the text input element | NO | null | | value | stringValue for checkbox | NO | empty | | id | stringID of input element | YES | | | onChange | func(e)e is bool whether checked or not | NO | | | checked | boolChecked or not | NO | false | | type | string (checkbox, radio)Type of input | NO | checkbox | | icon | Icon from @humblejs/icon | NO | check | | shape | string (round, square)Shape of checkbox | NO | round | | animation | string (smooth, jelly, rotate, pulse)Animation when user interacts with checkbox | NO | smooth | | classList | Array of stringFor further customising pretty checkbox | NO | [] |