Docs
Styling Emblor

Styling Emblor

Learn how to style Emblor components using the styling API

Overview

The TagInput component now supports a flexible styling API that allows you to apply custom class names to the components that make up the TagInput and their various subcomponents. The styleClasses prop accepts an object where keys correspond to subcomponent names and values are the custom class names you can apply. This approach provides fine-grained control over the styling of each part of the TagInput component and its children.

Tag Input Anatomy


<TagInput>
  └─<div> <!-- inlineTagsContainer -->
     ├─<TagList> <!-- part of TagList anatomy -->
     └─<Input> <!-- main input field -->
  └─<Autocomplete> <!-- if autocomplete is enabled -->
     └─<Popover> <!-- part of Autocomplete anatomy -->
  └─<TagPopover> <!-- if popover for tags is used -->
     └─<Popover> <!-- part of TagPopover anatomy -->
  └─<div> <!-- Additional UI elements like tag count or clear button -->

Styling

Inline Tags Container

This container holds the inline tags displayed by the TagInput.


PropDescription
inlineTagsContainer

The container that holds the inline tags displayed by the TagInput.


Tag Popover

The popover that appears for additional tag interactions such as nesting the tag list.


PropDescription
popoverContentStyles the content area of the tag popover
popoverTriggerStyles the trigger button of the popover.r

<TagPopover>
  └─<Popover>
     ├─<div> <!-- trigger -->
     └─<PopoverContent> <!-- content -->
        └─<TagList> <!-- Uses TagList anatomy -->
 

Tag List

Styles for the list that contains and displays the tags.


PropDescription
containerStyles the outer container of the tag list.
sortableListStyles the sortable list area within the tag list.

<TagList>
  └─<div> <!-- container -->
     └─<SortableList> <!-- sortableList -->
        └─<SortableItem> <!-- Each tag wrapped in sortable item -->
           └─<Tag> <!-- Individual tag -->
 

Autocomplete

Styles related to the autocomplete functionality.


PropDescription
commandStyles the Command wrapper used for autocomplete..
popoverTriggerStyles the trigger for the autocomplete popover.r
popoverContentStyles the content area within the autocomplete popover.r
commandListStyles the CommandList compnent in the autocomplete component
commandListStyles the CommandList compnent in the autocomplete component
commandGroupStyles the CommandGroup compnent in the autocomplete component
commandGroupStyles the CommandGroup compnent in the autocomplete component

<Autocomplete>
  └─<Popover>
     ├─<popoverTrigger> <!-- popoverTrigger -->
     └─<PopoverContent> <!-- popoverContent -->
        └─<Command> <!-- command -->
           ├─<CommandList> <!-- commandList -->
           │  ├─<CommandGroup> <!-- commandGroup -->
           │  │  └─<CommandItem> <!-- commandItem -->
           └─<CommandEmpty> <!-- Displayed when no commands are available -->
 

Tag

Styles specific to each tag within the list.


PropDescription
bodyStyles the body of each individual tag.
closeButtonStyles the close button on each tag.

<Tag>
  └─<span> <!-- body -->
     ├─<text> <!-- tag text content -->
     └─<Button> <!-- closeButton -->
 

Clear All Button

Styles for the clear all button that appears when the clearAll prop is set to true.


PropDescription
clearAllButton

Styles the clear all button that appears when the clearAll prop is set to true.


Usage

Here's how you can use the styleClasses prop to style different subcomponents:


<TagInput
  styleClasses={{
    input: 'border border-gray-300 p-2',
    inlineTagsContainer: 'bg-gray-200 p-2 rounded',
    tagPopover: {
      popoverContent: 'bg-white shadow-lg',
      popoverTrigger: 'text-blue-500 hover:text-blue-600',
    },
    tagList: {
      container: 'bg-red-100',
      sortableList: 'p-1',
    },
    autoComplete: {
      command: 'bg-blue-100',
      popoverTrigger: 'bg-green-200',
      popoverContent: 'p-4',
      commandList: 'list-none',
      commandGroup: 'font-bold',
      commandItem: 'cursor-pointer hover:bg-gray-100',
    },
    tag: {
      body: 'flex items-center gap-2',
      closeButton: 'text-red-500 hover:text-red-600',
    },
    clearAllButton: 'text-red-500 hover:text-red-600',
  }}
  // other props
/>