@easyfeedback/switches

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	-