tags input

usage.md

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>
  )
}