Slot Context
Loading "Slot Context"
Run locally for transcripts
π¨βπΌ It's a tale as old as time. Our
label and input are not properly
associated in this form and so clicking the label will not focus the input
as expected (in addition to other accessibility issues).But we don't want developers to be able to make this mistake. So we've made a
TextField component which will generate the id for the relationship (if one
is not provided). The tricky bit is we want people to be able to structure their
label and input however they want, so we can't render the input and label
for them. Instead, we want to be able to provide the id and htmlFor props to
the label and input.So what we want you to do is first create a
SlotContext and useSlotProps
hook in , then use those in the Label and
Input components to retrieve the necessary props.The
useSlotProps hook should accept a props object and a slot name and return
the props to be applied to the element for that slot. It should merge the props
it's been given with the props from the SlotContext for that slot.Once you've finished that, then render the
SlotContext provider in the
TextField component in to provide slot
props for the label and input.When you're finished, the label and input should be properly associated and
clicking the label should focus the input.
