Switches

Table of Contents

• Installation
• Switch
• ViewsSwitch

Installation

yarn add @easyfeedback/switches
# or
npm i @easyfeedback/switches

Switch

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 | - |