1.3.1 • Published 4 years ago
@zestui/radio v1.3.1
<zest-radio>
Simple radio input web-component to be use accross web irrespective of frameworks.
Installation
npm install @zestui/radio
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 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. |
theme | string | 'light | When 'dark' , the input will adapt to dark theme. |
inline | string | 'false' | When 'true' , the radio inputs will be aligned inline. |
error-msg | string | '' | When error message string is provided, the radio input will be error themed and error message is displayed. |
Examples
Default Radio
<zest-radio id='test' name='test' value='Male' label="gender" list='["Male", "Female", "Other"]' onchange='test(event)'></zest-radio>
Inline Radio
<zest-radio id='gender' inline='true' name='gender' label="gender" value='Male' list='["Male", "Female", "Other"]'></zest-radio>
Radio with error
<zest-radio id='error' name='error' value='' error-msg="Please select your gender" label="gender" list='["Male", "Female", "Other"]'></zest-radio>
Disabled Radio
<zest-radio id='disabled' name='disabled' disabled='true' value='Male' label="gender" list='["Male", "Female", "Other"]'></zest-radio>
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; |
1.3.1
4 years ago
1.3.0
4 years ago
1.2.0
4 years ago
1.1.0
4 years ago
1.0.14
4 years ago
1.0.13
4 years ago
1.0.12
4 years ago
1.0.11
4 years ago
1.0.10
4 years ago
1.0.9
4 years ago
1.0.8
4 years ago
1.0.7
4 years ago
1.0.6
4 years ago
1.0.5
4 years ago
1.0.4
4 years ago
1.0.3
4 years ago
1.0.2
4 years ago
1.0.1
4 years ago
1.0.0
4 years ago