`<form-show-if>` Web Component Examples

Download Back To CSSScript.Com

Use the form-show-if web component to declaratively show and hide form fields based on user input. A lightweight, no-dependency solution.

Basic Examples Email address

Depends on email This field is shown if the email field has any value.

Choose an option

Depends on email OR select This field is shown if the email field has any value OR if "Option 3" is chosen.

Specific Value Matching

Depends on email being "[email protected]" This field is shown only if the email is exactly "[email protected]".

Custom Classes Example

Depends on email (with custom classes) This container gets a green outline when shown and a red outline when hidden, instead of using the hidden attribute.

Radio Button Group

Option 1 Option 2 Option 3 Other

Other Value

Checkbox Group

Option 1 Option 2 Option 3 Other

Other Value