Form Input: How about filled / unfilled

[a842322]

Hey there! I am wondering if whether or not the input is filled / unfilled, it would be an entirely new state on it's own?

Asking because I am looking at material designs form input and whether or not it is filled would render different input types at a unfocused vs focused stage.

[mattpocock]

Interesting. I would probably just use the saved value in context:

const isFilled = context.value.length === 0;

I would turn this into a finite state if I needed to handle events differently based on whether the form was filled/unfilled, though

[mattpocock]

No worries! I mean 'finite state' as a state that you declare in your states: {} object. 'Infinite state' is another word for context, because values in context can be in infinite different states.

Yes, that's right. It means that you derive whether the input is filled or not from the context, not a finite state.

[a842322]

I was looking at the levels of the states and from a design perspective and what I have in Figma is following this general structure. First, I look at whether or not it is active/inactive.

I am wondering how this would translate back into the code base. Like what you have illustrated:

Finite states:

1. active.unfocused
2. active.focused
3. validation.valid
4. validation.invalid

Infinite states:

1. filled
2. unfilled

[a842322]

Could the output be such?

focused (true/ false)
valid (true/ false)
active (true/ false)
readOnly (true/ false)
filled (true/ false)

[mattpocock]

Absolutely! It's all a case of working out which state.matches() you're listening for. For instance, focused would be: state.matches('active.focus.focused')

[a842322]

I get it. Thanks so much matt! This has really helped.