Skip to main content
Version: v1

RHFSwitch

Switches toggle the state of a single setting on or off. RHFSwitch extends the Switch component and can be customized in a similar way.

Usage​

import RHFSwitch, { RHFSwitchProps } from '@nish1896/rhf-mui-components/mui/switch';
<RHFSwitch
fieldName="darkTheme"
control={control}
label="Enable Dark Theme?"
/>

Examples​

API​

RHFSwitchProps extends SwitchProps and accepts the following additional values.

NameTypeRequiredDescription
fieldNamestring✅React Hook Form requires name as a key for the registration process. This is a required prop for all components.
controlUseFormControl✅The control option yielded on calling the useForm hook.
onValueChange(e: ChangeEvent) => voidAn optional callback function when the value of a field changes. The changed value can be obtained from e.target.value.
labelReactNodeThe text to render in FormLabel component. By default, the value of fieldName such as firstName will be transformed to display "First Name".
formControlLabelPropsFormControlLabelPropsFormControlLabelProps to customise FormControlLabel component for a field. Multiple fields can be configured using the ConfigProvider component.