I am using lightning:tabSet and lightning:tab to display 3 user forms shown in the 3 tabs.

I would like the user to fill out the form on the first tab before he clicks on other tabs. How should I gray out other tabs until the first tab is clicked.

I can use "v.selectedTabId" to set a tab but without graying out this might confuse the user. I would like to gray out a tab to clearly indicate that it cannot be clickable.

Any ideas?


You can't do this with lightning:tab, because there is no attribute that supports this, and even the Lightning Design System has no provision for disabled tabs. Instead, you might want to dynamically create the tabs as the user progresses, so they have the ability to go back and forth as they continue filling out the data.

| improve this answer | |
  • sure, Sfdcfox. will think of a workaround. – SF Learner Jul 25 '18 at 6:32

I know this is a bit late, but you can actually. Consider the snippet below.

.THIS li.slds-tabs_default__item.disabled {
    pointer-events: none;
    text-decoration: line-through;

The pointer-events property allows for control over how HTML elements respond to mouse/touch events – including CSS hover/active states, click/tap events in Javascript, and whether or not the cursor is visible.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.