created:7/7/2021
updated:7/7/2021
loc
181
comments
3%
passed
10
failed
10
coverage
20%
Tags
grommet-controls
3.0.2A list of tags that can be removed.
Name | Description | Default | |
|---|---|---|---|
ITagsProps(8 properties) | |||
| children | Function that will be called when each option is rendered ((tags: TagValueType[], index: number, value: TagValueType) => ReactNode) & ReactNode | - | |
| focusable | Whether the tag list is focusable boolean | true | |
| icon | Icon element to remove a tag ReactNode | <FormClose /> | |
| tagProps | Tag elements <Box /> and <Text /> propertiesITagOwnProps & BoxProps & Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "onChange"> | - | |
| onChange | Function that will be called when the user removes a tag (event: { option: TagValueType[]; value: TagValueType; target: Element | Text; }) => void | - | |
| onClick | Function that will be called when the user clicks on a tag ((event: MouseEvent<HTMLDivElement, MouseEvent>, value: TagValueType) => void) & ((...args: any[]) => any) | - | |
| placeholder | Placeholder text to use when no value is provided string | - | |
| value | List of tag items to display TagValueType | [] | |
BoxProps(27 properties) | |||
file | imports |
|---|---|
| "../Tag" | |
| "./TagsProps" | ITagsProps |
- config
- source
() => {const [tags, setTags] = React.useState(defaultTags);const onChangeTags = ({ option }) => setTags(option);const removeTag = tagIndex =>setTags(tags.filter((_, index) => index !== tagIndex));return (<Tags value={tags} focusable={false} onChange={onChangeTags}>{(tag, index) => (<Boxkey={`remove_${index}`}pad={{horizontal: 'xsmall',}}><Buttonlabel={tag}icon={<Trash />}onClick={() => removeTag(index)}/></Box>)}</Tags>);}