Skip to content

Instantly share code, notes, and snippets.

@anubra266
Created June 15, 2021 08:41
Show Gist options
  • Save anubra266/7a3e24f5afb9d1b82e799f2ebec751e0 to your computer and use it in GitHub Desktop.
Save anubra266/7a3e24f5afb9d1b82e799f2ebec751e0 to your computer and use it in GitHub Desktop.
tags input
function Usage() {
  const inputStyles = useMultiStyleConfig("Input", { size:'md', variant:'filled' }).field
  const tagStyles = useStyleConfig("InputGroup", { size: 'sm' })
  console.log(tagStyles)  
   
  return (
      <Wrap w="100%" tabIndex="1" __css={inputStyles} display="flex"  align="center" h="auto" py="2" >
      
         <Tag
      borderRadius="full" 
      variant="solid" 
      colorScheme="green" 
    >
      <TagLabel maxW="auto">Chosen</TagLabel>
      <TagCloseButton />
    </Tag>
    <Tag
      borderRadius="full" 
      variant="solid" 
      colorScheme="green" 
    >
      <TagLabel>Chosen</TagLabel>
      <TagCloseButton />
    </Tag>
    <Tag
      borderRadius="full" 
      variant="solid" 
      colorScheme="green" 
    >
      <TagLabel>Chosen</TagLabel>
      <TagCloseButton />
    </Tag>
    <Tag
      borderRadius="full" 
      variant="solid" 
      colorScheme="green" 
    >
      <TagLabel>Chosen</TagLabel>
      <TagCloseButton />
    </Tag>
    <Tag
      borderRadius="full" 
      variant="solid" 
      colorScheme="green" 
    >
      <TagLabel>Chosen</TagLabel>
      <TagCloseButton />
    </Tag>
        <Input placeholder="Enter Something" variant="unstyled" border="solid 1px red" 
       w="min-content" /> 
      </Wrap>
  )
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment