How do we add text inside a Switch component in Material-UI react? I am trying to add "YES" and "NO" text inside the Switch Component.
Expected: When switch button is to the right, "Yes" text should be to the left and inside the Switch Component". When switch button is to the left, "No" text should be to the right and inside the Switch Component".
Have you tried manipulating the label value and position dynamically?
<FormControlLabel
value={state.checked ? "yes" : "no"}
control={<Switch color="primary" checked={state.checked} />}
label={state.checked ? "Yes" : "No"}
labelPlacement={state.checked ? "start" : "end"}
/>
Here it is the solution, reusable and styled for react from scratch, you can modify whatever you want;
https://www.sitepoint.com/react-toggle-switch-reusable-component/