Tag (fw-tag)

fw-tag provides a child component that is used to enable selecting multiple options in the Select component.

Demo

Show Code

Usage

Properties

Property	Attribute	Description	Type	Default
closable	closable	Whether the Tag can be closed.	boolean	true
disabled	disabled	Sets the state of the tag to disabled. The close button is disabled. If the attribute’s value is undefined, the value is set to false.	boolean	undefined
focusable	focusable	Whether the Tag is focusable.	boolean	true
graphicsProps	--	The props need to be passed for the variant. If the variant is avatar then use this prop to send the props for the fw-avatar component.	{}	{}
text	text	Display text in the tag component.	string	undefined
value	value	Value associated with the tag component, that is saved when the form data is saved.	number \| string	undefined
variant	variant	The variant of tag to be displayed.	"avatar" \| "standard"	'standard'

Events

Event	Description	Type
fwClosed	Triggered when the tag is deselected.	CustomEvent<any>

Methods

setFocus() => Promise<any>

Returns

Type: Promise<any>

Dependencies

Used by

• fw-select

Depends on

• fw-avatar
• fw-icon

Graph

graph TD;
  fw-tag --> fw-avatar
  fw-tag --> fw-icon
  fw-icon --> fw-toast-message
  fw-toast-message --> fw-spinner
  fw-toast-message --> fw-icon
  fw-select --> fw-tag
  style fw-tag fill:#f9f,stroke:#333,stroke-width:4px

---

Built with ❤ at Freshworks