Steps to replicate the issue

When you add the name attribute which is native to input elements, the name attribute is applied to the wrapper element instead of the <input>.

For example:
<cdx-checkbox name="blah"> will generate this HTML output:

<span class="cdx-checkbox cdx-checkbox--status-default" name="blah"><input id="cdx-checkbox-13" class="cdx-checkbox__input" type="checkbox" value="false"><span class="cdx-checkbox__icon"></span><!----></span>

What happens?:

The name attribute is applied to the wrapper element instead of the <input>.

What should have happened instead?:

The name attribute should apply to the <input>.
This is already done in TextInput and Radio.

• TextInput uses a composable to split the attributes applied to the root element <div> and child element <input>.
• Radio uses a name prop and binds the prop to the <input>'s name attribute.

The input element's name attribute is needed when submitting a form. We'll need to fix this bug in Checkbox and ToggleSwitch.

Acceptance Criteria

• For each component, add a name prop to the component and bind the prop to the name attribute on the <input> (similar to Radio)