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)