CheckTag
A tag that can be checked, used to quickly toggle the selected state.
Basic usage
Click the tag to toggle the checked state.
标签
export function CheckTagBasic() { const [checked, setChecked] = useState(true); return ( <ElCheckTag checked={checked} onCheckedChange={setChecked}>标签</ElCheckTag> );}
Types
Set the tag type with type.
primarysuccessinfowarningdanger
export function CheckTagTypes() { const [state, setState] = useState<Record<string, boolean>>({ primary: true }); return ( <div style={row}> {(["primary", "success", "info", "warning", "danger"] as CheckTagType[]).map((t) => ( <ElCheckTag key={t} type={t} checked={!!state[t]} onCheckedChange={(v) => setState((prev) => ({ ...prev, [t]: v }))} > {t} </ElCheckTag> ))} </div> );}
Disabled
Clicking no longer toggles the state after disabled is set.
export function CheckTagDisabled() { return ( <div style={row}> <ElCheckTag disabled>未选中禁用</ElCheckTag> <ElCheckTag checked disabled>选中禁用</ElCheckTag> </div> );}
CheckTag API
CheckTag Attributes
| Name | Description | Type | Default |
|---|
| checked | Whether the tag is checked | boolean | false |
| type | Tag type | enum | primary |
| disabled | Whether the tag is disabled | boolean | false |
CheckTag Events
| Name | Description | Parameters |
|---|
| onCheckedChange | Triggered when the checked state changes | Function |
CheckTag Slots
| Name | Description | React prop |
|---|
| default | Tag content | children |
