Infa.ai
Google Material 3 Design SystemComponents
Components
Text field
Text fields let users enter text into a UI. ## Usage Text fields behave like <input> elements. They provide a container with labels for user input. ``html <md-filled-text-field label="Label" value="Value"> </md-filled-text-field> <md-outlined-text-field label="Label" value="Value"> </md-outlined-text-field> ` ### Input type A text field's type attribute changes how the text field works, such as displaying a different keyboard or providing default validation. - type="text" (default) - type="email" - type="number" - type="password" - type="search" - type="tel" - type="url" - type="textarea" `html <md-filled-text-field label="Username" type="email"> </md-filled-text-field> <md-filled-text-field label="Password" type="password"> </md-filled-text-field> ` ### Labels Text fields should label their value with a floating label, a placeholder, or an external label. Labels help the user understand what value to input. `html <md-outlined-text-field label="Favorite food"> </md-outlined-text-field> <md-outlined-text-field placeholder="email@domain.com"> </md-outlined-text-field> <div>First name</div> <md-outlined-text-field aria-label="First name"> </md-outlined-text-field> ` ### Textarea Multi-line text fields behave like <textarea> elements. Textareas can specify the initial number of rows. Use CSS width, height, and resize to control the resize behavior of a textarea. `html <style> md-filled-text-field { resize: vertical; } </style> <md-filled-text-field type="textarea" label="Vertical resize" rows="3"> </md-filled-text-field> ` ### Icons Text fields may display optional icons. Use icons to describe the input method (such as a search icon), provide additional functionality (such as a clear icon), or to express errors. `html <md-outlined-text-field placeholder="Search for messages"> <md-icon slot="leading-icon">search</md-icon> </md-outlined-text-field> <md-outlined-text-field label="Password" type="password"> <md-icon-button toggle slot="trailing-icon"> <md-icon>visibility</md-icon> <md-icon slot="selected">visibility_off</md-icon> </md-icon-button> </md-outlined-text-field> <md-outlined-text-field label="Username" error error-text="Username not available"> <md-icon slot="trailing-icon">error</md-icon> </md-outlined-text-field> ` ### Prefix and suffix Add prefix-text and suffix-text attributes to text fields to display additional context for the value. `html <md-outlined-text-field label="Dollar amount" type="number" value="0" prefix-text="$" suffix-text=".00"> </md-outlined-text-field> ` ### Supporting text Supporting text conveys additional information about the input field, such as how it will be used. Supporting text can be replaced with error text when validating. `html <md-filled-text-field label="Comments" supporting-text="Provide comments for the issue"> </md-filled-text-field> <md-filled-text-field label="Name" required supporting-text="*required" error-text="Please fill out this field"> </md-filled-text-field> ` ### Character counter Text fields with a maxlength attribute will display a character counter. `html <md-outlined-text-field label="Title" value="Short" maxlength="10"> </md-outlined-text-field> ` ## Theming Text fields support Material theming and can be customized in terms of color, typography, and shape. ### Filled text field example `html <style> :root { --md-filled-text-field-container-shape: 0px; --md-sys-typescale-body-large: 400 1rem system-ui; --md-sys-color-primary: #006a6a; --md-sys-color-surface-container-highest: #e0e3e2; --md-filled-text-field-label-text-color: #3f4948; --md-filled-text-field-input-text-color: #161d1d; } </style> <md-filled-text-field label="Filled" value="Value"> </md-filled-text-field> ``
Checkbox
Checkboxes allow users to select one or more items from a set. Checkboxes can turn an option on or off. There's one type of checkbox in Material. Use this selection control when the user needs to select one or more options from a list. ## Usage Checkboxes may be standalone, pre-checked, or indeterminate. ### Label Associate a label with a checkbox using the <label> element. ## Accessibility Add an aria-label attribute to checkboxes without labels or checkboxes whose labels need to be more descriptive. > Checkboxes are not automatically labelled by <label> elements and always need an aria-label. See b/294081528. ## Images ## Code Examples ### Usage ``html <md-checkbox touch-target="wrapper"></md-checkbox> <md-checkbox touch-target="wrapper" checked></md-checkbox> <md-checkbox touch-target="wrapper" indeterminate></md-checkbox> ` ### Label `html <label> <md-checkbox touch-target="wrapper"></md-checkbox> Checkbox one </label> <md-checkbox id="checkbox-two" touch-target="wrapper"></md-checkbox> <label for="checkbox-two">Checkbox two</label> ` ### Accessibility `html <md-checkbox aria-label="Select all checkboxes"></md-checkbox> <label> <md-checkbox aria-label="Agree to terms and conditions"></md-checkbox> Agree </label> ``
Filter Checkboxes Chips
Chips help people enter information, make selections, filter content, or trigger actions. While buttons are expected to appear consistently and with familiar calls to action, chips should appear dynamically as a group of multiple interactive elements. ## Types 1. Assist chip 2. Filter chip 3. Input chip 4. Suggestion chip ## Usage Choose the type of chip based on its purpose and author. - Assist chips are common actions, such as adding an event to a calendar. - Filter chips are tags used to filter content, such as shopping categories. - Input chips are pieces of information entered by a user, such as event attendees. - Suggestion chips represent dynamic suggestions for user input, such as text message replies. ### Chip sets Chips should always appear in a set. Chip sets are toolbars that can display any type of chip or other toolbar items. ## Images ## Code Examples ### Usage ``html <md-chip-set> <md-assist-chip label="Assist"></md-assist-chip> <md-filter-chip label="Filter"></md-filter-chip> <md-input-chip label="Input"></md-input-chip> <md-suggestion-chip label="Suggestion"></md-suggestion-chip> </md-chip-set> ` ### Chip sets `html <h3>New event</h3> <md-chip-set> <md-filter-chip label="All day"></md-filter-chip> <md-assist-chip label="Add to calendar"></md-assist-chip> <md-assist-chip label="Set a reminder"></md-assist-chip> </md-chip-set> ` ### Icons `html <h3 id="dates-label">Dates</h3> <md-chip-set aria-labelledby="dates-label"> <md-filter-chip label="Mon" aria-label="Monday"></md-filter-chip> <md-filter-chip label="Tue" aria-label="Tuesday"></md-filter-chip> <md-filter-chip label="Wed" aria-label="Wednesday"></md-filter-chip> </md-chip-set> ` ### Focusable and disabled `html <md-chip-set aria-label="Actions"> <md-assist-chip label="Copy" soft-disabled></md-assist-chip> <md-assist-chip label="Paste" soft-disabled></md-assist-chip> </md-chip-set> <md-outlined-text-field type="textarea"></md-outlined-text-field> ``
Dialogs
Dialogs provide important prompts in a user flow. Dialogs behave like <dialog> elements, and can be closed with a <form method="dialog"> element. Dialogs have three optional sections: the headline title, the main content, and action buttons. ``html <md-dialog> <div slot="headline"> Dialog title </div> <form slot="content" id="form-id" method="dialog"> A simple dialog with free-form content. </form> <div slot="actions"> <md-text-button form="form-id">Ok</md-text-button> </div> </md-dialog> ` Dialogs are opened and closed by setting the open attribute or property. `html <md-dialog open> <div slot="content"> A dialog that is opened by default. </div> </md-dialog> ` Dialogs are also opened and closed by calling dialog.show() and dialog.close(). Both return a Promise that resolves after the dialog's animation finishes. `ts closeButton.addEventListener('click', async () => { await dialog.close(); }); ` A button's value attribute will set the dialog's returnValue property to identify which button closed it. `html <md-dialog open> <form slot="content" id="form-id" method="dialog">...</form> <div slot="actions"> <md-text-button form="form-id" value="cancel">Cancel</md-text-button> <md-text-button form="form-id" value="ok">Ok</md-text-button> </div> </md-dialog> ` `ts dialog.addEventListener('close', () => { const cancelClicked = dialog.returnValue === 'cancel'; const okClicked = dialog.returnValue === 'ok'; }); ` Dialogs are labelled by their headlines. Add an aria-label attribute to dialogs without a headline. `html <md-dialog aria-label="Error message"> <div slot="content">An error occurred, details ...</div> </md-dialog> ` Add a type="alert" attribute to dialogs that need to communicate an important message and require a user's response. Common examples include error messages that require confirmation and other action confirmation prompts. `html <md-dialog type="alert"> <div slot="headline">Confirm deletion</div> <form slot="content" id="form-id" method="dialog"> Are you sure you wish to delete this item? </form> <div slot="actions"> <md-text-button form="form-id" value="cancel">Cancel</md-text-button> <md-text-button form="form-id" value="delete">Delete</md-text-button> </div> </md-dialog> ` Dialogs supports Material theming and can be customized in terms of color, typography, and shape. `html <style> :root { / System tokens / --md-sys-color-surface-container-highest: #dde4e3; --md-sys-color-on-surface: #161d1d; --md-sys-color-on-surface-variant: #3f4948; --md-sys-typescale-body-medium: system-ui 16px/24px; --md-sys-typescale-headline-small: system-ui 24px/32px; / Component tokens / --md-dialog-container-shape: 0px; } </style> <md-dialog> <div slot="headline">Title</div> <div slot="content">Dialog content</div> </md-dialog> ``
Floating Action Button (FAB)
Floating action buttons (FAB) represent the most important action on a screen. They put key actions within reach. FABs should have an icon, such as a font md-icon, an svg, or an img. ``html <md-fab aria-label="Edit"> <md-icon slot="icon">edit</md-icon> </md-fab> ` FABs can be set to a lower elevation with the lowered attribute. `html <md-fab lowered aria-label="Edit"> <md-icon slot="icon">edit</md-icon> </md-fab> ` Icon-only FABs must include an aria-label that describes its action. Otherwise if aria-label is not provided, the FAB will default to announcing its visible contents. `html <md-fab aria-label="Edit"> <md-icon slot="icon">edit</md-icon> </md-fab> ` Extended FABs use their label for accessibility. Add an aria-label for additional context if needed. By supplying the label attribute, the extended FAB will make sure that the icon is not announced. `html <md-fab label="Edit" aria-label="Edit Comment"> <md-icon slot="icon">edit</md-icon> </md-fab> ` FAB colors may be changed with the variant attribute. It can be set to "surface" (default), "primary", "secondary", or "tertiary". `html <md-fab variant="primary" aria-label="Edit"> <md-icon slot="icon">edit</md-icon> </md-fab> <md-fab variant="secondary" aria-label="Edit"> <md-icon slot="icon">edit</md-icon> </md-fab> <md-fab variant="tertiary" aria-label="Edit"> <md-icon slot="icon">edit</md-icon> </md-fab> ` FABs may be small, medium (default), or large by setting the size attribute. Small FABs can optionally further reduce their touch target. `html <md-fab size="small" touch-target="none" aria-label="Edit"> <md-icon slot="icon">edit</md-icon> </md-fab> <md-fab size="small" aria-label="Edit"> <md-icon slot="icon">edit</md-icon> </md-fab> <md-fab aria-label="Edit"> <md-icon slot="icon">edit</md-icon> </md-fab> <md-fab size="large" aria-label="Edit"> <md-icon slot="icon">edit</md-icon> </md-fab> ` FAB supports Material theming and can be customized in terms of color, typography, and shape. `html <style> :root { --md-sys-color-surface-container-high: #e3e9e9; --md-sys-color-primary: #006a6a; --md-fab-container-shape: 0px; --md-fab-icon-size: 36px; background-color: #f4fbfa; } </style> <md-fab aria-label="Edit"> <md-icon slot="icon">edit</md-icon> </md-fab> ``
Icon Buttons
Icon buttons help people take supplementary actions with a single tap. Use icon buttons to display actions in a compact layout. Icon buttons can represent opening actions such as opening an overflow menu or search, or represent binary actions that can be toggled on and off, such as favorite or bookmark. Icon buttons can be grouped together or they can stand alone. ``html <md-icon-button> <md-icon>check</md-icon> </md-icon-button> <md-filled-icon-button> <md-icon>check</md-icon> </md-filled-icon-button> <md-filled-tonal-icon-button> <md-icon>check</md-icon> </md-filled-tonal-icon-button> <md-outlined-icon-button> <md-icon>check</md-icon> </md-outlined-icon-button> ` Add an href and optionally a target attribute to turn the icon button into a link. `html <md-icon-button href="https://google.com"> <md-icon>check</md-icon> </md-icon-button> ` Toggle icon buttons allow a single choice to be selected or deselected, such as adding or removing something from favorites. Add a second icon in the slot="selected" slot to change the icon when selected. Toggle icon buttons can be pre-selected by adding the selected attribute. `html <div> <md-icon-button toggle> <md-icon>close</md-icon> <md-icon slot="selected">check</md-icon> </md-icon-button> <md-filled-icon-button toggle> <md-icon>close</md-icon> <md-icon slot="selected">check</md-icon> </md-filled-icon-button> <md-filled-tonal-icon-button toggle> <md-icon>close</md-icon> <md-icon slot="selected">check</md-icon> </md-filled-tonal-icon-button> <md-outlined-icon-button toggle> <md-icon>close</md-icon> <md-icon slot="selected">check</md-icon> </md-outlined-icon-button> </div> <div> <md-icon-button toggle selected> <md-icon>close</md-icon> <md-icon slot="selected">check</md-icon> </md-icon-button> <md-filled-icon-button toggle selected> <md-icon>close</md-icon> <md-icon slot="selected">check</md-icon> </md-filled-icon-button> <md-filled-tonal-icon-button toggle selected> <md-icon>close</md-icon> <md-icon slot="selected">check</md-icon> </md-filled-tonal-icon-button> <md-outlined-icon-button toggle selected> <md-icon>close</md-icon> <md-icon slot="selected">check</md-icon> </md-outlined-icon-button> </div> ` Add an aria-label attribute to icon buttons whose labels need a more descriptive label. `html <md-icon-button aria-label="Search for Contact"> <md-icon>search</md-icon> </md-icon-button> ` Icon Button supports Material theming and can be customized in terms of color, and shape. `html <style> :root { --md-icon-button-icon-size: 32px; --md-sys-color-on-surface-variant: #dc362e; background-color: #fff8f6; } </style> <md-icon-button> <md-icon>check</md-icon> </md-icon-button> ``
Lists
Lists are continuous, vertical indexes of text and images. <md-list> is a container composed of <md-list-item>s of different types. ``html <md-list style="max-width: 300px;"> <md-list-item> Fruits </md-list-item> <md-divider></md-divider> <md-list-item> Apple </md-list-item> <md-list-item> Banana </md-list-item> <md-list-item> <div slot="headline">Cucumber</div> <div slot="supporting-text">Cucumbers are long green fruits that are just as long as this multi-line description</div> </md-list-item> <md-list-item type="link" href="https://google.com/search?q=buy+kiwis&tbm=shop" target="_blank"> <div slot="headline">Shop for Kiwis</div> <div slot="supporting-text">This will link you out in a new tab</div> <md-icon slot="end">openinnew</md-icon> </md-list-item> </md-list> ` Icons can be slotted into list-items' start or end slot. `html <md-list style="max-width: 300px"> <md-list-item> Lit <svg slot="start" style="height: 24px" viewBox="0 0 160 200"> <path fill="currentColor" d="m160 80v80l-40-40zm-40 40v80l40-40zm0-80v80l-40-40zm-40 40v80l40-40zm-40-40v80l40-40zm40-40v80l-40-40zm-40 120v80l-40-40zm-40-40v80l40-40z" /> </svg> </md-list-item> <md-divider></md-divider> <md-list-item> Polymer <md-icon slot="start">polymer</md-icon> </md-list-item> <md-divider></md-divider> <md-list-item> Angular <svg slot="start" style="height: 24px" viewBox="0 0 250 250"> <polygon points="108,135.4 125,135.4 125,135.4 125,135.4 142,135.4 125,94.5 " /> <path d="M125,30L125,30L125,30L31.9,63.2l14.2,123.1L125,230l0,0l0,0l78.9-43.7l14.2-123.1L125,30z M183.1,182.6h-21.7h0 l-11.7-29.2H125h0h0h-24.7l-11.7,29.2h0H66.9h0L125,52.1l0,0l0,0l0,0l0,0L183.1,182.6L183.1,182.6z" /> </svg> </md-list-item> </md-list> ` Images should be slotted into list-items' start slot. `html <md-list style="max-width: 300px;"> <md-list-item> Cat <img slot="start" style="width: 56px" src="https://placekitten.com/112/112"> </md-list-item> <md-divider></md-divider> <md-list-item> Kitty Cat <img slot="start" style="width: 56px" src="https://placekitten.com/114/114"> </md-list-item> <md-divider></md-divider> <md-list-item> Cate <img slot="start" style="width: 56px" src="https://placekitten.com/116/116"> </md-list-item> </md-list> ` List and List Item supports Material theming and can be customized in terms of color, typography, and shape. `html <style> :root { --md-list-container-color: #f4fbfa; --md-list-item-label-text-color: #161d1d; --md-list-item-supporting-text-color: #3f4948; --md-list-item-trailing-supporting-text-color: #3f4948; --md-list-item-label-text-font: system-ui; --md-list-item-supporting-text-font: system-ui; --md-list-item-trailing-supporting-text-font: system-ui; } [slot="trailing-supporting-text"] { width: 30px; text-align: end; } </style> <md-list> <md-list-item type="button"> <div slot="headline">Apple</div> <div slot="supporting-text">In stock</div> <div slot="trailing-supporting-text">+100</div> </md-list-item> <md-list-item type="button"> <div slot="headline">Banana</div> <div slot="supporting-text">In stock</div> <div slot="trailing-supporting-text">56</div> </md-list-item> <md-list-item type="button"> <div slot="headline">Cucumber</div> <div slot="supporting-text">Low stock</div> <div slot="trailing-supporting-text">5</div> </md-list-item> </md-list> ``
Menus
Menus display a list of choices on a temporary surface. When opened, menus position themselves to an anchor. Thus, either anchor or anchorElement must be supplied to md-menu before opening. Additionally, a shared parent of position:relative should be present around the menu and its anchor, because the default menu is positioned relative to the anchor element. Menus also render menu items such as md-menu-item and handle keyboard navigation between md-menu-items as well as typeahead functionality. Additionally, md-menu interacts with md-menu-items to help you determine how a menu was closed. Listen for and inspect the close-menu custom event's details to determine what action and items closed the menu. ``html <!-- Note the position: relative style --> <span style="position: relative"> <md-filled-button id="usage-anchor">Set with idref</md-filled-button> <md-menu id="usage-menu" anchor="usage-anchor"> <md-menu-item> <div slot="headline">Apple</div> </md-menu-item> <md-menu-item> <div slot="headline">Banana</div> </md-menu-item> <md-menu-item> <div slot="headline">Cucumber</div> </md-menu-item> </md-menu> </span> <script type="module"> // This example uses anchor as an ID reference const anchorEl = document.body.querySelector('#usage-anchor'); const menuEl = document.body.querySelector('#usage-menu'); anchorEl.addEventListener('click', () => { menuEl.open = !menuEl.open; }); </script> <span style="position: relative"> <md-filled-button id="usage-anchor-2">Set with element ref</md-filled-button> <md-menu id="usage-menu-2"> <md-menu-item> <div slot="headline">Apple</div> </md-menu-item> <md-menu-item> <div slot="headline">Banana</div> </md-menu-item> <md-menu-item> <div slot="headline">Cucumber</div> </md-menu-item> </md-menu> </span> <script type="module"> // This example uses MdMenu.prototype.anchorElement to set the anchor as an // HTMLElement reference. const anchorEl = document.body.querySelector('#usage-anchor-2'); const menuEl = document.body.querySelector('#usage-menu-2'); menuEl.anchorElement = anchorEl; anchorEl.addEventListener('click', () => { menuEl.open = !menuEl.open; }); </script> ` Menus support Material theming and can be customized in terms of color. Additionally, md-menu composes md-list, and each menu item extends md-list-item (see theming documentation), so most of the tokens for those components can also be used for Menu. `html <style> :root { background-color: #f4fbfa; --md-menu-container-color: #f4fbfa; --md-menu-container-shape: 0px; --md-sys-color-on-surface: #161d1d; --md-sys-typescale-body-large-font: system-ui; } md-menu-item { border-radius: 28px; } md-menu-item::part(focus-ring) { border-radius: 28px; } / Styles for button and not relevant to menu / md-filled-button { --md-sys-color-primary: #006a6a; --md-sys-color-on-primary: #ffffff; } </style> <span style="position: relative"> <md-filled-button id="theming-anchor">Themed menu</md-filled-button> <md-menu id="theming-menu" anchor="theming-anchor"> <md-menu-item> <div slot="headline">Apple</div> </md-menu-item> <md-menu-item> <div slot="headline">Banana</div> </md-menu-item> <md-menu-item> <div slot="headline">Cucumber</div> </md-menu-item> </md-menu> </span> <script type="module"> const anchorEl = document.body.querySelector("#theming-anchor"); const menuEl = document.body.querySelector("#theming-menu"); anchorEl.addEventListener("click", () => { menuEl.show(); }); </script> ``
Progress Indicators
Progress indicators inform users about the status of ongoing processes, such as loading an app or submitting a form. There are two types of progress indicators: linear and circular. Progress indicators may be determinate to show progress, or indeterminate for an unspecified amount of progress. ``html <md-circular-progress value="0.75"></md-circular-progress> <md-circular-progress indeterminate></md-circular-progress> <md-linear-progress indeterminate></md-linear-progress> <md-linear-progress value="0.5"></md-linear-progress> ` Indeterminate progress indicators may cycle between four colors (primary, primary container, tertiary, and tertiary container by default). `html <md-circular-progress four-color indeterminate></md-circular-progress> <md-linear-progress four-color indeterminate></md-linear-progress> ` Add an aria-label attribute to progress indicators to give them a descriptive name. `html <md-circular-progress value="0.5" aria-label="Page refresh progress"></md-circular-progress> <md-linear-progress value="0.5" aria-label="Download progress"></md-linear-progress> ` Circular progress indicators display progress by animating along an invisible circular track in a clockwise direction. `html <md-circular-progress indeterminate></md-circular-progress> <md-circular-progress value="0.6"></md-circular-progress> ` Linear progress indicators display progress by animating along the length of a fixed, visible track. `html <md-linear-progress indeterminate></md-linear-progress> <md-linear-progress value="0.6"></md-linear-progress> ` Linear progress indicators may show a buffer to communicate both determinate and indeterminate progress. The progress bar and track represent known progress while the buffer dots represent unknown progress. `html <md-linear-progress value="0.5" buffer="0.8"></md-linear-progress> ` Progress indicators supports Material theming and can be customized in terms of color. `html <style> :root { --md-linear-progress-track-height: 8px; --md-linear-progress-track-shape: 8px; --md-linear-progress-active-indicator-height: 8px; --md-sys-color-primary: #006A6A; --md-sys-color-surface-container-highest: #DDE4E3; } </style> <md-linear-progress value="0.5"></md-linear-progress> ``
Radio Button
Radio buttons let people select one option from a set of options. Radios behave like <input type="radio"> elements and form a group with the same name attribute. Only one radio can be selected in a group. Radios can be pre-selected by adding a checked attribute. Add a value to identify which radio is selected in a form. ``html <form> <md-radio name="animals" value="cats"></md-radio> <md-radio name="animals" value="dogs"></md-radio> <md-radio name="animals" value="birds" checked></md-radio> </form> ` Associate a label with a radio using the <label> element. `html <md-radio id="cats-radio" name="animals" value="cats"></md-radio> <label for="cats-radio">Cats</label> <md-radio id="dogs-radio" name="animals" value="dogs"></md-radio> <label for="dogs-radio">Dogs</label> ` Add an aria-label attribute to radios without labels or radios whose labels need to be more descriptive. Place radios inside a role="radiogroup". Radio groups must display a label, either with aria-label or aria-labelledby. `html <div role="radiogroup" aria-labelledby="group-title"> <h3 id="group-title">Starting position</h3> <div> <md-radio id="first-radio" name="group" value="1" aria-label="First"></md-radio> <label for="first-radio">1st</label> </div> <div> <md-radio id="second-radio" name="group" value="2" aria-label="Second"></md-radio> <label for="second-radio">2nd</label> </div> </div> ` Radios support Material theming and can be customized in terms of color. `html <style> :root { --md-sys-color-primary: #006A6A; --md-radio-icon-size: 16px; } </style> <md-radio name="group"></md-radio> <md-radio name="group" checked></md-radio> <md-radio name="group"></md-radio> ``
Ripple
Ripples are state layers used to communicate the status of a component or interactive element. A state layer is a semi-transparent covering on an element that indicates its state. A layer can be applied to an entire element or in a circular shape. ## Usage Ripples display on hover and press pointer interactions. They may be attached to a control in one of three ways. 1. Attached to the parent element ``html <style> .container { position: relative; } </style> <button class="container"> <md-ripple></md-ripple> </button> ` 2. Attached to a referenced element `html <style> .container { position: relative; } </style> <div class="container"> <md-ripple for="control"></md-ripple> <input id="control"> </div> ` 3. Attached imperatively `html <style> .container { position: relative; } </style> <div class="container"> <md-ripple id="ripple"></md-ripple> <button id="ripple-control"></button> </div> <script> const ripple = document.querySelector('#ripple'); const control = document.querySelector('#ripple-control'); ripple.attach(control); </script> ` ### Unbounded To create an unbounded circular ripple centered on an element, use the following styles. `css .container { display: flex; place-content: center; place-items: center; position: relative; } md-ripple.unbounded { border-radius: 50%; inset: unset; height: var(--state-layer-size); width: var(--state-layer-size); } ` `html <style> .container { border-radius: 50%; height: 32px; width: 32px; / Needed for unbounded ripple / display: flex; place-content: center; place-items: center; position: relative; } md-ripple.unbounded { / Needed for unbounded ripple / border-radius: 50%; inset: unset; height: 64px; width: 64px; } </style> <button class="container"> <md-ripple class="unbounded"></md-ripple> </button> ` ## Theming Ripples support Material theming and can be customized in terms of color. ### Tokens Token Default value --md-ripple-hover-color --md-sys-color-on-surface --md-ripple-pressed-color --md-sys-color-on-surface - All tokens ### Example `html <style> :root { --md-sys-color-primary: #006A6A; --md-ripple-hover-color: var(--md-sys-color-primary); --md-ripple-pressed-color: var(--md-sys-color-primary); } .container { position: relative; } </style> <button class="container"> <md-ripple></md-ripple> </button> ``
Select
Select menus display a list of choices on temporary surfaces and display the currently selected menu item above the menu. ## Usage Select (also referred to as a dropdown menu) allows choosing a value from a fixed list of available options. It is analogous to the native HTML <select> element. ``html <md-outlined-select> <md-select-option aria-label="blank"></md-select-option> <md-select-option selected value="apple"> <div slot="headline">Apple</div> </md-select-option> <md-select-option value="apricot"> <div slot="headline">Apricot</div> </md-select-option> </md-outlined-select> <md-filled-select> <md-select-option aria-label="blank"></md-select-option> <md-select-option value="apple"> <div slot="headline">Apple</div> </md-select-option> <md-select-option value="apricot"> <div slot="headline">Apricot</div> </md-filled-select> ` ### Required select Indicate that a selection is mandatory by adding the required attribute. `html <md-filled-select required> <md-select-option value="one"> <div slot="headline">One</div> </md-select-option> <md-select-option value="two"> <div slot="headline">Two</div> </md-select-option> </md-filled-select> ` ## Theming Select supports Material theming and can be customized in terms of color, typography, and shape. ### Filled Select example `html <style> :root { --md-filled-select-text-field-container-shape: 0px; --md-filled-select-text-field-container-color: #f7faf9; --md-filled-select-text-field-input-text-color: #005353; --md-filled-select-text-field-input-text-font: system-ui; } md-filled-select::part(menu) { --md-menu-container-color: #f4fbfa; --md-menu-container-shape: 0px; } </style> <md-filled-select> <md-select-option selected value="apple"> <div slot="headline">Apple</div> </md-select-option> <md-select-option value="tomato"> <div slot="headline">Tomato</div> </md-select-option> </md-filled-select> ` ### Outlined Select example `html <style> :root { --md-outlined-select-text-field-outline-color: #6e7979; --md-outlined-select-text-field-container-shape: 0px; --md-outlined-select-text-field-input-text-color: #005353; --md-outlined-select-text-field-input-text-font: system-ui; } md-outlined-select::part(menu) { --md-menu-container-color: #f4fbfa; --md-menu-container-shape: 0px; } </style> <md-outlined-select> <md-select-option selected value="apple"> <div slot="headline">Apple</div> </md-select-option> <md-select-option value="tomato"> <div slot="headline">Tomato</div> </md-select-option> </md-outlined-select> ``
Sliders
Sliders allow users to view and select a value (or range) along a track. They're ideal for adjusting settings such as volume and brightness, or for applying image filters. Sliders can use icons or labels to represent a numeric or relative scale. ## Usage Sliders may be continuous or discrete, and may also represent a range. ``html <md-slider></md-slider> <md-slider ticks value="50"></md-slider> <md-slider range value-start="25" value-end="75"></md-slider> ` ### Continuous Allows users to select a value along a subjective range. `html <md-slider min="0" max="100" value="50"></md-slider> ` ### Discrete Allows users to select a specific value from a predetermined range. Tick marks may be used to indicate available values. `html <md-slider step="5" ticks min="0" max="20"></md-slider> ` ### Range A range slider has two handles, and indicates a minimum and maximum value in a range. `html <md-slider range value-start="25" value-end="50"></md-slider> ` ### Value label A value label displays the specific value that corresponds with the handle's placement. The label appears when the handle is selected. For range sliders, labels appear when either handle is selected. `html <md-slider labeled></md-slider> ` ## Theming Slider supports Material theming and can be customized in terms of color and shape. ### Example `html <style> :root { / System tokens / --md-sys-color-primary: #006A6A; / Component tokens / --md-slider-handle-shape: 0px; } </style> <md-slider range value-start="25" value-end="75" ticks step="5" ></md-slider> ``
Switch
Switches toggle the state of an item on or off. ## Usage Switches are similar to checkboxes, and can be unselected or selected. ``html <md-switch></md-switch> <md-switch selected></md-switch> ` ### Icons Icons can be used to visually emphasize the switch's selected state. Switches can choose to display both icons or only selected icons. `html <md-switch icons></md-switch> <md-switch icons selected></md-switch> <md-switch icons show-only-selected-icon></md-switch> <md-switch icons show-only-selected-icon selected></md-switch> ` ### Label Associate a label with a switch using the <label> element. `html <label> Wi-Fi <md-switch selected></md-switch> </label> <label for="switch">Bluetooth</label> <md-switch id="switch"></md-switch> ` ## Theming Switches supports Material theming and can be customized in terms of color and shape. ### Example `html <style> :root { / System tokens / --md-sys-color-primary: #006a6a; --md-sys-color-on-primary: #ffffff; --md-sys-color-outline: #6f7979; --md-sys-color-surface-container-highest: #dde4e3; / Component tokens / --md-switch-handle-shape: 0px; --md-switch-track-shape: 0px; } </style> <md-switch></md-switch> <md-switch selected></md-switch> ``
Tabs
Tabs organize groups of related content that are at the same level of hierarchy. ## Usage Tabs contain multiple primary or secondary tab children. Use the same type of tab in a tab bar. ``html <md-tabs> <md-primary-tab>Video</md-primary-tab> <md-primary-tab>Photos</md-primary-tab> <md-primary-tab>Audio</md-primary-tab> </md-tabs> <md-tabs> <md-secondary-tab>Birds</md-secondary-tab> <md-secondary-tab>Cats</md-secondary-tab> <md-secondary-tab>Dogs</md-secondary-tab> </md-tabs> ` ### Selection Add an active attribute to change which tab is selected. `html <md-tabs> <md-primary-tab>Video</md-primary-tab> <md-primary-tab active>Photos</md-primary-tab> <md-primary-tab>Audio</md-primary-tab> </md-tabs> ` To observe changes to tab selections, add an event listener to <md-tabs>, listening for the change event. `ts tabs.addEventListener('change', (event: Event) => { if (event.target.activeTabIndex === 2) { // ... perform logic only if index of selected item is 2. } }); ` ### Icons Tabs may optionally show an icon. Icons communicate the type of content within a tab. Icons should be simple and recognizable. `html <md-tabs> <md-primary-tab> <md-icon slot="icon">piano</md-icon> Keyboard </md-primary-tab> <md-primary-tab> <md-icon slot="icon">tune</md-icon> Guitar </md-primary-tab> </md-tabs> ` Tabs may optionally show icons without a label. `html <md-tabs> <md-primary-tab> <md-icon slot="icon">piano</md-icon> </md-primary-tab> <md-primary-tab> <md-icon slot="icon">tune</md-icon> </md-primary-tab> </md-tabs> ` ## Theming Tabs supports Material theming and can be customized in terms of color, typography, and shape. ### Primary tab example `html <style> :root { / System tokens / --md-sys-color-surface: #f7faf9; --md-sys-color-primary: #005353; / Component tokens / --md-primary-tab-label-text-font: cursive, system-ui; --md-primary-tab-label-text-size: 0.8em; } </style> <md-tabs> <md-primary-tab>Tab 1</md-primary-tab> <md-primary-tab>Tab 2</md-primary-tab> <md-primary-tab>Tab 3</md-primary-tab> </md-tabs> ``
Buttons
Buttons help people initiate actions, from sending an email, to sharing a document, to liking a post. There are five types of common buttons: elevated, filled, filled tonal, outlined, and text. ## Types 1. Elevated button 2. Filled button 3. Filled tonal button 4. Outlined button 5. Text button ## Usage Buttons have label text that describes the action that will occur if a user taps a button. ### Icon An icon may optionally be added to a button to help communicate the button's action and help draw attention. ## Accessibility Add an aria-label attribute to buttons whose labels need a more descriptive label. ### Focusable and disabled By default, disabled buttons are not focusable with the keyboard, while "soft-disabled" buttons are. Some use cases encourage focusability of disabled toolbar items to increase their discoverability. ## Images ## Code Examples ### Usage ``html <md-outlined-button>Back</md-outlined-button> <md-filled-button>Complete</md-filled-button> ` ### Icon `html <md-filled-tonal-button> Send <svg slot="icon" viewBox="0 0 48 48"><path d="M6 40V8l38 16Zm3-4.65L36.2 24 9 12.5v8.4L21.1 24 9 27Zm0 0V12.5 27Z"/></svg> </md-filled-tonal-button> <md-text-button trailing-icon> Open <svg slot="icon" viewBox="0 0 48 48"><path d="M9 42q-1.2 0-2.1-.9Q6 40.2 6 39V9q0-1.2.9-2.1Q7.8 6 9 6h13.95v3H9v30h30V25.05h3V39q0 1.2-.9 2.1-.9.9-2.1.9Zm10.1-10.95L17 28.9 36.9 9H25.95V6H42v16.05h-3v-10.9Z"/></svg> </md-text-button> ` ### Accessibility `html <md-elevated-button aria-label="Add a new contact">Add</md-elevated-button> ` ### Focusable and disabled `html <div role="toolbar"> <md-text-button>Copy</md-text-button> <md-text-button>Cut</md-text-button> <!-- This button is disabled but kept focusable to improve its discoverability in the toolbar. --> <md-text-button soft-disabled>Paste</md-text-button> </div> ``
