Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

@zestui/radio-chip

zestmoney-ui97MIT1.3.0

Zest radio web component

Radio chip, web, component

readme

<zest-radio-chip>

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

Installation

npm install @zestui/radio-chip

Attributes

Name Type Default Description
id string '' Sets the id attribute for the radio input. Preferred when used inside forms.
name string '' Sets the name attribute for the radio input. Preferred when used inside forms.
label string '' Label to display for the radio input.
disabled string 'false' When 'true' radio input is disabled cannot be interacted with.
required string 'false' When 'true' the input field is marked mandatory.
list Array [] Creates the radio list based on this attribute. Should be a array of value string.
value string '' Sets the default checked value of the radio.
theme string 'light When 'dark', the input will adapt to dark theme.
full-width string 'false' When 'true', the radio chip will take full width of the container.
error-msg string '' When error message string is provided, the input will be error themed and error message is displayed.

Examples

Default Radio chip

<zest-radio-chip id='test' name='test' value='Male' label="gender" list='["Male", "Female", "Other"]' onchange='test(event)'></zest-radio-chip>

Inline Radio chip

<zest-radio-chip id='gender' inline='true' name='gender' label="gender" value='Male' list='["Male", "Female", "Other"]'></zest-radio-chip>

Full width Radio chip

<zest-radio-chip id='gender' full-width='true' name='gender' label="gender" value='Male' list='["Male", "Female", "Other"]'></zest-radio-chip>

Radio chip with error

<zest-radio-chip id='error' name='error' value='' error-msg="Please select your gender" label="gender" list='["Male", "Female", "Other"]'></zest-radio-chip>

Disabled Radio chip

<zest-radio-chip id='disabled' name='disabled' disabled='true' value='Male' label="gender" list='["Male", "Female", "Other"]'>
</zest-radio-chip>

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;