Re-measured the form controls in an app (hq.training, 287 controls) on 0.2.459, now that #1976 is fixed. Dark mode is right, and with the app's role and shape tokens set they draw in its palette with its corners. Three things still keep them out of an ordinary form.
1. Select, Textarea and NumberInput have no two-way binding
TextInput and Switch use useModel (#1965), so v-model:value="name" keeps a page's signal in step. Select, Textarea and NumberInput take value one way and emit change/input, so every call site has to write the handler back by hand:
<Select :value="group()" @change="group.set($event)" … />against the native control's :model="group". Across a few hundred fields that is a few hundred chances to bind one way and not the other.
2. Select cannot take its options from the client
options is read in <script server> and rendered with @foreach. A list that arrives with the page's data, which is most of them (an athlete's groups, a coach's plans, a gym's rooms), is not known at render time, so the select renders with only its placeholder. There is no <option> slot to fall back on. Measured: <Select :options="labOptions"> with labOptions a client constant renders one option, "Select an option".
3. TextInput is always type="text"
type is hard-coded. EmailInput, PasswordInput, NumberInput and SearchInput exist, but there is nothing for date, time, datetime-local, url, tel or color, and no min/max/step/pattern/list. A form with a date in it has to mix library and native controls, which is the inconsistency the library is meant to remove.
Suggested
useModel('value', …)inSelect,TextareaandNumberInput, the same asTextInput.Selectoptions reactive on the client (auseReactiveProp/useModeloveroptions), plus a default slot for<option>children.- A
typeprop onTextInputfor the remaining text-like types, and pass-through ofmin,max,step,pattern,listandmaxlength.