1.9.10 • Published 3 years ago
@humblejs/form v1.9.10
Form
Form elements package contains various UI components for forms.
Install
yarn add @humblejs/formStyle
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 | [] |