Search Tab

The search tab is an expandable "find in table" control that sits at the top of a table of content.

lotusSearchTab - the class assigned to the wrapper div that contains a link with the word "Find" in it.
lotusTabExpanded - and additional class that goes on the lotusSearchTab div when the search tab is open.
lotusSearchForm - the class assigned to the form that displays when you open the search tab.
lotusText - the input field for the search text.
lotusInactive - an additional class that goes on the search input box until the user starts typing in the box.
lotusSubmit - the submit button for the search form.

The search tab is made out of two pieces - a div with the word find in it and a toggle arrow, and a search form that can be toggled.

It needs to be placed within an action bar component to work correctly.

The text input field initially has gray text (set by lotusInactive class). As soon as the user starts typing, that class should be removed.

The search tab has not been reviewed for accessibility, although there are some ARIA attributes in place.

At one point, this was the global search control.

May 2010: added lotusInactive class to the search input box to make the text initially gray and removed the gray color from the actual input field.

June 27, 2012: Updated color contrast of the drop-down to be accessible (small text 4.5:1 equivalent).