1.0.6 • Published 3 years ago
@easyfeedback/switches v1.0.6
Switches
Table of Contents
Installation
yarn add @easyfeedback/switches
# or
npm i @easyfeedback/switchesSwitch
The Switch component is used as an alternative for the Checkbox component. You can switch between
enabled or disabled states.
Import component
import { Switch } from '@easyfeedback/switches'General usage
<Switch label="My Setting" />With labels
Use the labelPlacement property to add a visible label the switch.\
If labelPlacement is not set the label will add to the aria-label attribute.
You can set the value to start or end.
<HStack>
<Switch label="left labelled" labelPlacement="start" />
<Switch label="right labelled" labelPlacement="end" />
</HStack>With a color scheme
Use the colorScheme property to change the color variant of the switch.
<Switch label="My switch has a blue color" colorScheme="blue" />Sizes
Use the size property to change the width and height of the switch.
You can set the value to sm, md or lg.
<HStack>
<Switch label="sm" size="sm" />
<Switch label="md" size="md" />
<Switch label="lg" size="lg" />
</HStack>Props
| Name | Description | type | Default |
|---|---|---|---|
| label | Defines the string that labels the checkbox element. Even if it is not displayed on the screen, it is used in the aria-label attribute. | string | - |
| colorScheme | Optional The color scheme of the switch. | {the chakra color schemes} | 'teal' |
| id | Optional The id assigned to the input element. | string | - |
| labelPlacement | Optional The position of the label. | 'start' \| 'end' | - |
| size | Optional The size of switch. | 'sm' \| 'md' \| 'lg' | 'md' |
ViewsSwitch
The Switch component is used as an alternative for the Checkbox component. You can switch between
enabled or disabled states.
Import component
import { ViewsSwitch } from '@easyfeedback/switches'General usage
<ViewsSwitch />
// or
<ViewsSwitch onChange={(event) => {}} />Props
| Name | Description | type | Default |
|---|---|---|---|
| onChange | Optional Callback when the state (controlled or un-controlled) changes. | (event: ChangeEvent<HTMLInputElement>) => void | - |