Feedback: terrible experience with forms

[x0k]

I have been trying to use this library to create forms and here are my thoughts:

• Limited set of attributes for standard elements. Here are a few cases
  • type (submit, reset, etc), for Button
  • class, style, readonly, etc. for Input
  • data-* attributes
• Weak typing compared to standard elements:
  • string | string[] in Choicebox
  • string in Input with type="number"
• Inconvenient behavior of controlled components. You cannot pass undefined as the initial value because... no reason. But Choicebox is something special. Even if you provide an initial value for type=“checkbox” as an array, your value will immediately be replaced with “” because.... no reason.
• Lack of standard inputs:
  • The type attribute of Input is very limited. (there is no color, file, range, datetime-local, time, tel, url)
  • Select with multiple does not exist
• Components are too rigid. For example, Input has an error property, but you can't pass multiple errors to it. Ok, you will render an errors list by yourself, but how to trigger error state of the Input now?

My recommendations:

• Extend standard element props if you use it internally

  // MyButton.svelte
  import type { HTMLButtonAttributes } from "svelte/elements";
  interface MyButtonProps extends HTMLButtonAttributes { ... }

• Always use strong types

  interface CommonChoiceboxProps { ... }
  type ChoiceboxProps = ({
  type: "checkbox"
  value: string[]
  } | {
  type: "radio"
  value: string
  }) & CommonChoiceboxProps

• Prefer small stand-alone components rather than all-in-one components (like Input), and then compose them into blocks. That way, if your block abstraction leaks, the user can drop down to a lower level and customize low-level components to meet their requirements.

[kampsy]

Thank you for your detailed feedback! I truly appreciate the time you took to share your insights on the limitations and areas for improvement.

Expanded Attributes:

Adding support for attributes such as all types, class, style, readonly, data-* and other common properties for Buttons and Inputs is a top priority for me. This enhancement will make the components more versatile and applicable to a wider range of use cases.

I completely agree with your recommendations, and I plan to work on this next. I am about to release a new version that includes additional components.

Thanks once again for this valuable input; it is instrumental in shaping the next steps for this library.

[phamduylong]

@kampsy I'm down to give some of these a try, if you can assign something to me so that it doesn't overlap with what you have done.