Form filed conditional logic to disable or enable form fields dependencies.

[ishah-twilio]

Hello Team

I like feedback on design for conditional logic to form filed conditional logic to show or hide form fields dependencies.

Product:
IoT > Super SIM > Create Fleet > SMS & IP Commands callback URL

Conditions:

1. When user enables Data as service they should be allowed to configure following two features
   ~ data limit (required)
   ~ and IP Commands callback URL (optional)

2. When user enables SMS Commands as service user should be allowed to configure following feature
   ~ SMS Commands callback URL (optional)

By default when user loads this feature -- Data and SMS Commands features are enabled.

Codesandbox example
https://1u6gi.sse.codesandbox.io/create-fleet

Looking for feedback on

1. spacing padding / gutter of fields
2. Accessibility issues
3. correct usage of components
4. Any other suggestions
5. Copy (is it clear indication for what is required and what is optional and when)
6. Should required field show red dot icon indication when disabled?
7. Styling for Input with add-ons (prefix/suffix text or icons) when disabled?
8. Any other comments/feedback team has.

Thank you.

[richbachman]

Hi @ishah-twilio

I took a look at the codesandbox. Thanks for putting that together. I'm not seeing any glaring issues at the moment. A few answers/suggetions:

spacing padding / gutter of fields
Accessibility issues
correct usage of components

That all looks pretty good. I'll share with design to see if they have any further suggestions.

Copy (is it clear indication for what is required and what is optional and when)

It may be helpful to add some copy about why certain fields are disabled. Something around "In order to set a data limit, enable data..."

Should required field show red dot icon indication when disabled?

I don't think input fields should be set to required and disabled a the same time. That may cause some validation errors. Your engineering team may need to dynamically add the required prop when the input field is enabled.

Styling for Input with add-ons (prefix/suffix text or icons) when disabled?

This styling is fine, but it'd be nice to add a color-text-weak to the suffix text when the field is disabled. You should be able to do this with Text. Something like <Text color={disabled ? 'colorTextWeak' : 'colorText'>MB/Month</Text>. There's probably more code needed for that to work, so treat that as a nice to have.

I'll share with design to get more their feedback as well.

[corinne-nagel]

Hi @ishah-twilio , I've left feedback in Figma here: https://www.figma.com/file/SpeLpBoqN2vZv8KWcSn0J1/Ishita?node-id=108%3A3

You'll notice spacing suggestions, copy edits and some layout adjustments. I'll +1 to Rich's comments about explaining why certain fields are disabled. I don't see why you can't have a required disabled from a design perspective, but if that causes validation errors then that should be avoided.

Let me know if you have any questions.