@jsdesign/jsd-checkbox

1.0.6 • Public • Published

<jsd-checkbox>

Simple checkbox input web-component to be use accross web irrespective of frameworks.

Installation

npm install @jsdesign/jsd-checkbox

Attributes

Name Type Default Description
id string '' Sets the id attribute for the checkbox input. Preferred when used inside forms.
name string '' Sets the name attribute for the input. Preferred when used inside forms.
label string '' Label to display for the checkbox input.
disabled boolean -- When attribute is present, checkbox input is disabled cannot be interacted with.
required boolean -- When attribute is present, the input field is marked mandatory.
list Array [] Creates the checkbox list based on this attribute. Should be a array of value string.
value Array [] Sets the default checked values. Must be list of valid values.
theme string 'light When 'dark', the input will adapt to dark theme.
inline boolean -- When attribute is present, the checkbox inputs will be aligned inline.
error-msg string '' When error message string is provided, the checkbox input will be error themed and error message is displayed.

Examples

Default Radio

<jsd-checkbox id='snacks' label='snacks' value='["Samosa"]' list='["Samosa", "Kachori", "Jalebi"]' onchange="test(event)"></jsd-checkbox>

Inline Radio

<jsd-checkbox id='snacks' inline label='snacks' value='["Samosa"]' list='["Samosa", "Kachori", "Jalebi"]'></jsd-checkbox>

Radio with error

<jsd-checkbox id='snacks-disabled' label='snacks' error-msg='Please select your choices' list='["Samosa", "Kachori", "Jalebi"]'>
</jsd-checkbox>

Disabled Radio

<jsd-checkbox id='snacks-disabled' disabled label='snacks' value='["Samosa"]' list='["Samosa", "Kachori", "Jalebi"]'>
</jsd-checkbox>

Cutomizable property list

Name Default
--color-primary #1eba68;
--color-primary-dark #1ba75e;
--color-secondary #f6f6f6;
--color-secondary-dark #efefef;
--color-secondary-darktheme rgba(255, 255, 255, 0.3);
--color-secondary-dark-darktheme rgba(255, 255, 255, 0.6);
--color-error #dd4421;
--color-error-background #ffebe6;
--color-placeholder #737373;
--color-placeholder-disabled #e0e0e0;
--color-placeholder-darktheme #e0e0e0;
--color-label #909090;
--color-black #2c2c2c;
--color-header-black #252525;
--color-header-tag #747373;
--color-white #ffffff;
--color-border #edebeb;
--border-radius 0.5rem;
--border-width 1px;
--border-width-hover 3px;
--label-spacing 0.2rem;
--label-case uppercase;
--label-font-size 0.8rem;
--button-font-weight 500;

Readme

Keywords

Package Sidebar

Install

npm i @jsdesign/jsd-checkbox

Weekly Downloads

2

Version

1.0.6

License

MIT

Unpacked Size

12.8 kB

Total Files

5

Last publish

Collaborators

  • jayabratha