[Feature]: Make Select component compatible with React Hook Form
Author: lucafaggianelliCreated Aug 7, 2024Updated Aug 19, 2024
LabelsType: EnhancementType: Accessibility
What problem does this feature solve?
React Hook Form is a convenient library to handle forms and with native HTML input elements the integration is flawless, actually also with most of Tremor input components the integration is flawless, i.e. with the TextInput I can just do (which is what I would do for the <input> element):
<TextInput
{...register('company_name')}
placeholder=""
required
minLength={3}
/>Though the same method doesn't work for the Select component, this is the workaround I used:
const { onChange, ...registerProps } = register('role')
<Select
{...registerProps}
placeholder="Role"
required
onValueChange={(value) => onChange({ target: { value, name: 'role' } })}
>
{roles.map((role) => (
<SelectItem key={role} value={role}>
{role}
</SelectItem>
))}
</Select>What does the proposed API look like?
It would be nice to make the Select component compatible with RHF so the integration would be:
<Select
{...register('role')}
placeholder="Role"
required
>
{roles.map((role) => (
<SelectItem key={role} value={role}>
{role}
</SelectItem>
))}
</Select>Source: tremorlabs/tremor-npm