### removable and selectable
These props are going to determine the behavior of the Tag component.
If the removable prop is true, there is going to appear at the right side of the Tag component a small exit button that is going to be directly attached to the onRemove function event.
If that's not the case, and selectable prop is true instead the removable one, then the Tag Component is going to have a behavior similar to a checkbox. Also it is important to keep in mind this variant is going to be directly attached to the onRemove function event.
{% hint style="warning" %}
At using the Tag component only one of these props should be true and not both at the same time.
{% endhint %}
### onSelect
This function event is going to be only available when the selectable prop of the component is true. This is going to return as parameter an object with the selected Tag value and checked state. This is going to to help developers to make the filters and removing the object properly.
```jsx
const [array, setArray] = useState(['Item 1', 'Item 2', 'Item 3']);
const selectAction = (e)=>{
const {value, checked} = e;
if(checked){
console.log(`${value} is selected`);
}else{
console.log(`${value} is not selected`);
}
}
return(
array.map(item => (
))
)
```
### onRemove
This function event is going to be only available when the removable prop of the component is true. This is going to return as parameter an object with the selected Tag to be removed. This is going to to help developers to make the filters and removing the object properly.
```jsx
const [array, setArray] = useState(['Item 1', 'Item 2', 'Item 3']);
const removeItem = (e)=>{
let newArray = array.filter(item => item !== e.value);
setArray(newArray);
}
return(
array.map(item => (
))
)
```
## Components Dependency
For this component elaboration there were used the following internal components:
* [Telicon](/sds/sds-components/simple-components/telicon.md)
## Live Demo
For detailed code usage documentation, see the Storybooks for each framework below.
### React
{% embed url="" %}
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://2600hz.gitbook.io/sds/sds-components/simple-components/tag/code.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.