FocusRing

Imports

import {FocusRing} from 'material-expressive-react';
import {FocusRing} from 'material-expressive-react/focus';

Props

Prop	Type	Default	Required	Description
addController	((controller: ReactiveController) => void)		No	Registers a ReactiveController to participate in the element's reactive update cycle. The element automatically calls into any registered controllers during its lifecycle callbacks. If the element is connected when addController() is called, the controller's hostConnected() callback will be immediately called. @category controllers
attach	((control: HTMLElement) => void)		No	Attaches the element to an interactive control.
attributeChangedCallback	((name: string, _old: string | null, value: string | null) => void)		No	Synchronizes property values when attributes change. Specifically, when an attribute is set, the corresponding property is set. You should rarely need to implement this callback. If this method is overridden, super.attributeChangedCallback(name, _old, value) must be called. See responding to attribute changes on MDN for more information about the attributeChangedCallback. @category attributes
connectedCallback	(() => void)		No	Invoked when the component is added to the document's DOM. In connectedCallback() you should setup tasks that should only occur when the element is connected to the document. The most common of these is adding event listeners to nodes external to the element, like a keydown event handler added to the window. ts<br/>connectedCallback() &#123;<br/> super.connectedCallback();<br/> addEventListener('keydown', this._handleKeydown);<br/>&#125;<br/> Typically, anything done in connectedCallback() should be undone when the element is disconnected, in disconnectedCallback().
control	HTMLElement | null		No	Gets or sets the element that controls the visibility of the attachable element. It is one of: - The control referenced by the for attribute. - The control provided to element.attach(control) - The element's parent. - null if the element is not controlled.
detach	(() => void)		No	Detaches the element from its current control.
disconnectedCallback	(() => void)		No	Invoked when the component is removed from the document's DOM. This callback is the main signal to the element that it may no longer be used. disconnectedCallback() should ensure that nothing is holding a reference to the element (such as event listeners added to nodes external to the element), so that it is free to be garbage collected. ts<br/>disconnectedCallback() &#123;<br/> super.disconnectedCallback();<br/> window.removeEventListener('keydown', this._handleKeydown);<br/>&#125;<br/> An element may be re-connected after being disconnected. @category lifecycle
for	string		No	HTML attribute name alias (matches docs). Prefer htmlFor in React.
handleEvent	((event: FocusRingEvent) => void)		No	@private
hasUpdated	boolean		No	Is set to true after the first update. The element code cannot assume that renderRoot exists before the element hasUpdated. @category updates
htmlFor	string		No	Alias for the underlying for attribute. Material Web uses the htmlFor property name.
inward	boolean		No	Makes the focus ring animate inwards instead of outwards.
isUpdatePending	boolean		No	True if there is a pending update as a result of calling requestUpdate(). Should only be read. @category updates
removeController	((controller: ReactiveController) => void)		No	Removes a ReactiveController from the element. @category controllers
renderOptions	RenderOptions		No	@category rendering
renderRoot	HTMLElement | DocumentFragment		No	Node or ShadowRoot into which element DOM should be rendered. Defaults to an open shadowRoot. @category rendering
requestUpdate	((name?: PropertyKey, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown>, useNewValue?: boolean | undefined, newValue?: unknown) => void) | undefined		No	Requests an update which is processed asynchronously. This should be called when an element should update based on some state not triggered by setting a reactive property. In this case, pass no arguments. It should also be called when manually implementing a property setter. In this case, pass the property name and oldValue to ensure that any configured property options are honored. @param name name of requesting property @param oldValue old value of requesting property @param options property options to use instead of the previously configured options @param useNewValue if true, the newValue argument is used instead of reading the property value. This is important to use if the reactive property is a standard private accessor, as opposed to a plain property, since private members can't be dynamically read by name. @param newValue the new value of the property. This is only used if useNewValue is true. @category updates
update	((changed: PropertyValueMap<FocusRing>) => void)		No	Updates the element. This method reflects property values to attributes and calls render to render DOM via lit-html. Setting properties inside this method will not trigger another update.
updateComplete	Promise<boolean>		No	Returns a Promise that resolves when the element has completed updating. The Promise value is a boolean that is true if the element completed the update without triggering another update. The Promise result is false if a property was set inside updated(). If the Promise is rejected, an exception was thrown during the update. To await additional asynchronous work, override the getUpdateComplete method. For example, it is sometimes useful to await a rendered element before fulfilling this Promise. To do this, first await super.getUpdateComplete(), then any subsequent state. @return A promise of a boolean that resolves to true if the update completed without triggering another update. @category updates
visible	boolean		No	Makes the focus ring visible.

Events

This component does not explicitly re-emit DOM events via wrapper props.

Slots

Material Web components frequently use named slots. In React, you can pass slot="..." on children (e.g. <Icon slot="icon" />).

If you need to slot a child component that does not accept a slot prop, use the Slotted utility (see Utilities → Slotted).

Examples

See Storybook for live examples and variants.