Switch

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

$3

- @author Henry Dyson J

Link

Story Book Link to Switch

$3

Try it have a fun codeBox

Installation

``sh
npm i @licuido-ui/ui_switch
`

Import component

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

Usage

`jsx

`

Image

!alt text

Sample Code

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