@licuido-ui/ui_switch NPM

Switch

The Switch component provides users with a switch for toggling between two mutually exclusive states.

Author

@author Henry Dyson J henry@crayond.co

Link

Story Book Link to Switch

PlayGround

Try it have a fun codeBox

Installation

npm i @licuido-ui/ui_switch

Import component

import { Switch } from '@licuido-ui/ui_switch';

Usage

<Switch label={'My Label'} isLabel={true} />

Image

alt text

Sample Code

<Switch
  label={'My Label'}
  isLabel={true}
  id={''}
  className={''}
  sx={{}}
  switchSx={{}}
  switchTrackActiveStyle={{ backgroundColor: '#0C356A' }}
  switchTrackDefaultStyle={{ backgroundColor: '#d7e3ff' }}
  switchThumbActiveStyle={{ color: '#fff' }}
  switchThumbDefaultStyle={{ color: '#0C356A' }}
/>

Props

Name	Description	Default	Control
id	string	string
className	string	""
sx	The system prop that allows defining system overrides as well as additional CSS styles.SxProps<Theme>	{ }	sx : {}
label	string	""	sample label
isLabel	boolean	false	FalseTrue
switchSx	SxProps<{}>	{ }	switchSx : {}
action	A ref for imperative actions currently only supports focusVisible() action.Ref<ButtonBaseActions>	-	Set object
centerRipple	If true, the ripples are centered They won't start at the cursor interaction position.boolean	false	Set boolean
disableTouchRipple	If true, the touch ripple effect is disabled.boolean	false	Set boolean
focusRipple	If true, the base button will have a keyboard focus ripple.boolean	false	Set boolean
focusVisibleClassName		-	Set string
LinkComponent	The component used to render a link when the href prop is provided.ElementType<any>	'a'	Set object
onFocusVisible		-	-
TouchRippleProps	Props applied to the TouchRipple element	-	-
touchRippleRef	A ref that points to the TouchRipple element	ref	-
component	ReactNode	ReactNode	ReactNode
labelStyle	SxProps	SxProps	SxProps{}
switchTrackDefaultStyle	SxProps	SxProps	SxProps{}
switchThumbDefaultStyle	SxProps	SxProps	SxProps{}
switchTrackActiveStyle	SxProps	SxProps	SxProps{}
switchThumbActiveStyle	SxProps	SxProps	SxProps{}
formControlLabelStyle	SxProps	SxProps	SxProps{}
labelPlacement	'start' `or` 'end' `or` 'top' `or` 'bottom'	'start' `or` 'end' `or` 'top' `or` 'bottom'	start

@emotion/react @emotion/styled @mui/material react react-dom

@licuido-ui/ui_role-management @licuido-ui/react

3.0.1

8 months ago