Label for React Toggle component

[benpolinsky]

Hi,

It'd be nice to be able to provide an accessible label for the <Toggle/> component, or alternatively, allow the component to be toggled by clicking a <label /> with an htmlFor prop that matches the <Toggle/> name prop.

Could even expose both the toggle button and label as render prop parameters to allow users to rearrange the order of each.

I'd be happy to start a PR if you are open to it.

Thanks

[MatSFT]

Sounds like what you are suggesting is a label for the toggle component is that right? Similar to how checkboxes do this thing:

msteams-ui-components/msteams-ui-components-react/src/checkboxes/checkbox.tsx

Lines 48 to 71 in 3237f45

	return (
	<label
	id={this.state.id}
	className={classes(themeClassNames.container, className)}
	style={style}>
	<span
	id={this.state.labelId}
	aria-hidden
	className={themeClassNames.label}>{label}</span>
	<input
	id={id}
	name={name}
	type="checkbox"
	aria-labelledby={this.state.labelId}
	aria-required={required}
	aria-checked={actuallyChecked}
	checked={actuallyChecked}
	onClick={this.click}
	required={required}
	readOnly
	{...rest}/>
	<span aria-hidden className={themeClassNames.checkbox}></span>
	</label>
	);

That makes sense but we don't really have a design for it. If you do want to make a PR, make sure the label piece is optional.