vscode-number component

[scholarsmate]

Feature request

A component that works like standard HTML input type="number" to accept numeric inputs.

Expected behavior

The input component accepts numerics.

Current behavior

There is currently no work-alike in this library that I'm aware of.

Use case

Provide an offset to move to, from 0 to the size of the file, for a hex editor.

Screenshots/references

[lucyydotp]

<vscode-text-field type="number" />seems to do this already, looks like it's just passing the property through to the underlying input

edit: it ignores min and max though so it's not hugely useful

[triwav]

It also doesn't support passing in a value of 0 for the value. It just stays blank

[triwav]

One work around I found for the 0 issue and might be helpful to you as well @lucyydotp is to make use of the control attribute. In my case I'm using Svelte and made a component that uses vscode-text-field internally but deals with the internal input instead which I think should solve your issue as well.

[hawkticehurst]

Hey all! I'm doing a pass on old issues and realized I've discussed number fields in another issue but never responded here with the same information (sorry about that 😅).

To explicitly respond to @lucyydotp's suggestion, adding type="number" to the vscode-text-field will unfortunately not work.

The toolkit is built using a web component framework called FAST. In particular, FAST provides a package of unstyled base components that we use. In this package, FAST decided to split text fields and number fields into separate components, so the lack of type="number" in the vscode-text-field is actually intentional in this case.

The only valid types that can be passed to a FAST text field (and by proxy vscode-text-field) are "email", "password", "tel", "text", and "url" (reference).

On the toolkit side, we haven't added a vscode-number-field component at this point because we've tried to keep the toolkit limited to components that already exist in the VS Code core UI (and a number field isn't one of those components as far as I'm aware). We may change this stance in the future, but like I've said other issues we're very tightly resourced at this time so adding new components to the toolkit isn't something we can really do right now even if we wanted to.

Hope you understand and that this update is helpful! But please do let me know if you have any questions

[pogi7]

I decided to make a vscode-number-field that accepts numbers for my open source project.

It probably makes sense if this component is added to the vscode-webview-ui-toolkit

Here's an example of what that component looks like in my app