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 Buttonclass, style, readonly, etc. for Inputdata-* attributes
- Weak typing compared to standard elements:
string | string[] in Choiceboxstring 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 { ... }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.
I have been trying to use this library to create forms and here are my thoughts:
type(submit,reset, etc), forButtonclass,style,readonly, etc. forInputdata-*attributesstring | string[]inChoiceboxstringinInputwithtype="number"undefinedas the initial value because... no reason.But
Choiceboxis something special. Even if you provide an initial value fortype=“checkbox”as an array, your value will immediately be replaced with“”because.... no reason.typeattribute ofInputis very limited. (there is nocolor,file,range,datetime-local,time,tel,url)Selectwithmultipledoes not existInputhas anerrorproperty, 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 theInputnow?My recommendations:
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.