Styling Emblor

Docs

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.

Prop	Description
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.

Prop	Description
popoverContent	Styles the content area of the tag popover
popoverTrigger	Styles 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.

Prop	Description
container	Styles the outer container of the tag list.
sortableList	Styles 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.

Prop	Description
command	Styles the Command wrapper used for autocomplete..
popoverTrigger	Styles the trigger for the autocomplete popover.r
popoverContent	Styles the content area within the autocomplete popover.r
commandList	Styles the CommandList compnent in the autocomplete component
commandList	Styles the CommandList compnent in the autocomplete component
commandGroup	Styles the CommandGroup compnent in the autocomplete component
commandGroup	Styles 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.

Prop	Description
body	Styles the body of each individual tag.
closeButton	Styles 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.

Prop	Description
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
/>