feat: add Format or Suffix to the FluentNumberField

[joriverm]

🙋 Feature Request

we are currently implementing some number fields in our application, and it is requested the number fields have either a custom format or a Suffix parameter so we can give context to the number that is input by the user. something to show like 'kg' or '€'.

this isn't urgent, and with the v3 changes coming up i have no idea how we would best approach this tbh.

🤔 Expected Behavior

i took some screenshots from other libraries to show what i am talking about :

😯 Current Behavior

there is no current possibility atm, as it is using the BindConverter to convert it into a string

💁 Possible Solution

I've been looking around for solutions but im kinda stuck finding one. Ive used some css ::after to add a label to a numerfield but it can only be put after the start slot, because an <input> can't have a ::before or ::after.

fluent-number-field::part(start)::after
{
    content: 'kg';
}

which ended up like this :

then i started looking at the web components, to maybe ask there (not that i would get a response...), but they seem to no longer have the number-field in v3 ?

v2 doesn't seem to have anything though

if you have any ideas im willing to look into it and implement it!

🔦 Context

we are making forms where you have to fill in things like weight, and length etc and it would help the user to see instantly what format it is expected to be in (grams, kilograms, centimetre,... )

💻 Examples

https://blazor.radzen.com/numeric?theme=material3 https://demos.telerik.com/blazor-ui/numerictextbox/formats

[vnbaaij]

I would recommend to not use the FluentNumberFied at all in its current form. The (v2) web component has too many issues and those will most probably not be addressed anymore.

You could use a FluentTextField with InputMode="InputMode.Numeric" instead. The FluentTextField supports using 'start' and/or 'end' slots. See https://www.fluentui-blazor.net/TextField#icons for an example with icons. Of course you are not restricted to using icons only. If you do something like:

<FluentTextField>
    <div slot="start">$</div>
    <div slot="end">.00</div>
</FluentTextField>

You'll get:

[joriverm]

ah, i figured something was up with the FluentNumericField as i was digging into it, but i didn't realise what yet, thanks for clarifying!

i thought the slots were only for icons, didn't know we could put whatever we wanted into it. that should help ye!

there is one issue though, but i don't know if this is to be fixed with web components v3/FluentUI Blazor v5, but FluentTextField's TextFieldType doesn't have number, so we can still enter letters and don't have the up/down one would expect from numeric select.

By the looks of it, if TextFieldType gets a new value Number it would make the underlying input a numeric input and look as following

i suggest we add it, but i dont know what the future looks like for the inputfield. what i can see is that the fieldType in webcomponent v3 also doesn't allow number input ( https://github.com/microsoft/fluentui/blob/web-components-v3/packages/web-components/src/text-input/text-input.options.ts#L40-L65 ) even though a html input does

[vnbaaij]

there is one issue though, but i don't know if this is to be fixed with web components v3/FluentUI Blazor v5, but FluentTextField's TextFieldType doesn't have number, so we can still enter letters and don't have the up/down one would expect from numeric select.

That is what the InputMode is meant for. Setting it to Numeric will give you this (when using a mobile browser):

I don't think there will be a specific TextFieldType of Number

[joriverm]

Hey Vincent, sorry for the slow reply, im currently on holiday and had some issues running the demo on my linux machine hehe

anyway, the input mode does nothing on a PC and i can just enter in text, because the input type of the textfield is text by default. the browser therefor allows entering text.

imo that kinda makes the InputMode kinda useless on desktop, but its good to see it functioning on a phone! keep in mind this was tested on the current fluentUI blazor components and not on the new v3 webcomponents ^^;

sorry for all this trouble btw!

EDIT : just did some reading https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode

input mode is just a hint for the virtual keyboard, but does nothing of forcing certain input type.

[joriverm]

@vnbaaij : have you seen my last comment?

[vnbaaij]

Yes, I've seen it. Looking at v3 web components, I see no new NumberInput (yet). Need to inquire with that team to see what the plans are. It might end up with us implementing an alternative ourselves for v5. No definitive plans made yet.

[joriverm]

no problem! i know what to tell the developers when we get there then! good luck!