Within a label, there is a button embedded as shown below:
<MyLabel htmlFor='xx' onClick={() => onChange}>
<MyButton id='xx' {...rest} />
Check it!
</MyLabel>
In the Developer Tools Elements section, the structure appears like this:
<label for="xx">
<button type="button" role="checkbox" aria-checked="false" data-state="unchecked" value="on" id="xx">
</button>
Check it!
</label>
The relevant components are defined as follows:
import styled from 'styled-components';
import * as Checkbox from '@radix-ui/react-checkbox';
export const StyledCheckboxRoot = styled(Checkbox.Root)`
button {
all: unset;
}
height: 2rem;
width: 2rem;
`;
const MyLabel = styled.label`
display: flex;
width: 100%;
& > button {
margin-right: 1rem;
}
`;
Upon clicking the button, the aria-checked attribute toggles between "false" and "true", along with the data-state attribute switching between "unchecked" and "checked".
Is there a method to update the styling of the parent element, which is the label in this scenario, when these actions occur?