New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Checkbox works improperly when use modular forms with kobalte #176
Comments
Thanks for creating this issue! Unfortunately I am not able to keep up with the changes in Kobalte. I recommend to contact the Kobalte team for example in the SolidJS Discord. If you could fix it, feel free to become a contributor of Modular Forms by updating the code examples. |
Thank's for the answer. I've already written to discord channel of Kobalte and been waiting for the answer. Could you explain please the thing. I see that the problem is in setter of |
It is important to connect the native |
I managed to make it work for the case of the single checkbox (by the way radio group has the same problem). Thank's to the issue on kobalte's github. <Field name="singlebox" type="boolean">
{(field, props) => (
<Checkbox
{...props}
label="Single checkbox"
error={field.error}
checked={field.value}
setValue={(v)=> setValue(aForm, 'singlebox', v)}
/>
)}
</Field>
```
And within Checkbox component we have
```js
<Kobalte.Root
{...rootProps}
validationState={props.error ? 'invalid' : 'valid'}
class={styles.checkbox}
onChange={(v)=>props.setValue(v)}
>
<Kobalte.Input {...inputProps} class={styles.checkbox__input} />
<Kobalte.Control class={styles.checkbox__control}>
<Kobalte.Indicator>x</Kobalte.Indicator>
</Kobalte.Control>
<Kobalte.Label class={styles.checkbox__label}>
{props.label}
</Kobalte.Label>
</Kobalte.Root>
```
Works fine.
But in more complex case that I'm needed now, I use checkbox array. I have such the code:
```js
<For
each={[
{ label: 'sunday', value: '1' },
{ label: 'monday', value: '2' },
{ label: 'tuesday', value: '3' },
]}
>
{({ label, value }) => (
<Field name="weekdays" type="string[]">
{(field, props) => (
<Checkbox
{...props}
label={label}
value={value}
checked={field.value?.includes(value)}
setValue={(v)=>setValue(aForm, 'weekdays', v)}
/>
)}
</Field>
)} It doesn't work because of in the line |
I got almost all the answers here. There is also the bug (likely) with duplicating values within checkboxes array. But I think I can use it in my project right now. |
How could I do that? I wish other developers have no problem with checkboxes and radio groups |
At the bottom of each documentation page is an "Edit page" button. It will take you to the MDX file on GitHub, which you can edit there. |
Hi,
Can't make checkbox working properly when use modular forms with kobalte. Seems like I follow the manual but still doesn't work.
I reproduced the wrong behavior here on stackblitz:
https://stackblitz.com/edit/solidjs-templates-soysfz?file=src%2Fviews%2Fhome%2FHome.jsx
The problem is the checkboxes get checked only if a user clicks on label but not on kobalte's Checkbox.control component.
But if I remove checked attr from this line:
The text was updated successfully, but these errors were encountered: