{"name":"tags-input","title":"Tags Input","description":"Tag chips input: type and press Enter to add, Backspace to delete the last tag, double-click a tag to edit it inline, with an optional max tag count and paste splitting.","installCommand":"bunx marko-ui add tags-input -y","usageTags":"","importSnippet":"import TagsInput from \"@/components/ui/tags-input/tags-input.marko\";","usageSnippet":"","tags":["TagsInput"],"parts":[],"props":[{"name":"addOnPaste","type":"boolean | undefined","required":false,"default":"false","description":"Whether to add a tag when you paste values into the tag input"},{"name":"allowDuplicates","type":"boolean | undefined","required":false,"default":"false","description":"Whether to allow duplicate tags."},{"name":"allowOverflow","type":"boolean | undefined","required":false,"description":"Whether to allow tags to exceed max. In this case,\nwe'll attach `data-invalid` to the root"},{"name":"autoFocus","type":"boolean | undefined","required":false,"description":"Whether the input should be auto-focused"},{"name":"blurBehavior","type":"'clear' | 'add' | undefined","required":false,"description":"The behavior of the tags input when the input is blurred\n- `\"add\"`: add the input value as a new tag\n- `\"clear\"`: clear the input value"},{"name":"defaultInputValue","type":"string | undefined","required":false,"description":"The initial tag input value when rendered.\nUse when you don't need to control the tag input value."},{"name":"defaultValue","type":"string[] | undefined","required":false,"description":"The initial tag value when rendered.\nUse when you don't need to control the tag value."},{"name":"delimiter","type":"string | RegExp | undefined","required":false,"default":",","description":"The character that serves has:\n- event key to trigger the addition of a new tag\n- character used to split tags when pasting into the input"},{"name":"dir","type":"'ltr' | 'rtl' | undefined","required":false,"default":"ltr","description":"The document's text/writing direction."},{"name":"disabled","type":"boolean | undefined","required":false,"description":"Whether the tags input should be disabled"},{"name":"editable","type":"boolean | undefined","required":false,"default":"true","description":"Whether a tag can be edited after creation, by pressing `Enter` or double clicking."},{"name":"form","type":"string | undefined","required":false,"description":"The associate form of the underlying input element."},{"name":"getRootNode","type":"(() => ShadowRoot | Document | Node) | undefined","required":false,"description":"A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron."},{"name":"ids","type":"ElementIds | undefined","required":false,"description":"The ids of the elements in the tags input. Useful for composition."},{"name":"inputValue","type":"string | undefined","required":false,"description":"The controlled tag input's value"},{"name":"invalid","type":"boolean | undefined","required":false,"description":"Whether the tags input is invalid"},{"name":"label","type":"string","required":false},{"name":"max","type":"number | undefined","required":false,"default":"Infinity","description":"The max number of tags"},{"name":"maxLength","type":"number | undefined","required":false,"description":"The max length of the input."},{"name":"name","type":"string | undefined","required":false,"description":"The name attribute for the input. Useful for form submissions"},{"name":"placeholder","type":"string | undefined","required":false,"description":"The placeholder text for the input"},{"name":"readOnly","type":"boolean | undefined","required":false,"description":"Whether the tags input should be read-only"},{"name":"required","type":"boolean | undefined","required":false,"description":"Whether the tags input is required"},{"name":"sanitizeValue","type":"((value: string) => string) | undefined","required":false,"description":"Function to sanitize the tag value before adding.\nUseful for trimming whitespace, normalizing case, or stripping special characters."},{"name":"translations","type":"IntlTranslations | undefined","required":false,"description":"Specifies the localized strings that identifies the accessibility elements and their states"},{"name":"validate","type":"((details: ValidateArgs) => boolean) | undefined","required":false,"description":"Returns a boolean that determines whether a tag can be added.\nUseful for preventing duplicates or invalid tag values."},{"name":"value","type":"string[] | undefined","required":false,"description":"The controlled tag value"}],"events":[{"name":"highlightedValueChange","arg":"string"},{"name":"inputValueChange","arg":"string"},{"name":"onFocusOutside","arg":"FocusOutsideEvent","description":"Function called when the focus is moved outside the component"},{"name":"onHighlightChange","arg":"HighlightChangeDetails","description":"Callback fired when a tag is highlighted by pointer or keyboard navigation"},{"name":"onInputValueChange","arg":"InputValueChangeDetails","description":"Callback fired when the input value is updated"},{"name":"onInteractOutside","arg":"InteractOutsideEvent","description":"Function called when an interaction happens outside the component"},{"name":"onPointerDownOutside","arg":"PointerDownOutsideEvent","description":"Function called when the pointer is pressed down outside the component"},{"name":"onValueChange","arg":"ValueChangeDetails","description":"Callback fired when the tag values is updated"},{"name":"onValueInvalid","arg":"ValidityChangeDetails","description":"Callback fired when the max tag count is reached or the `validateTag` function returns `false`"},{"name":"valueChange","arg":"string[]"}],"keyboard":[],"accessibilityNotes":[],"examples":[{"id":"tags-input-demo","title":"Basic","source":"import TagsInput from \"@marko-ui/shadcn/ui/tags-input/tags-input.marko\";\n\n","description":"An uncontrolled tags input seeded with `defaultValue`."},{"id":"tags-input-label","title":"With label","source":"import TagsInput from \"@marko-ui/shadcn/ui/tags-input/tags-input.marko\";\n\n","description":"Pass `label` to render an associated `