Basic RTL
Auto-detected from dir='rtl' attribute
Live Demo
Toggle icon on left, text right-aligned
Try It
RTL mode is automatically detected when dir="rtl" is set.
- Toggle icon moves to left side
- Text aligns to the right
- Dropdown options flow right-to-left
- Pills remove button on left side
Details
Auto-Detection
Set dir="rtl" on the component or any parent element.
All UI elements automatically mirror for RTL languages.
Arabic Text Example
Real Arabic language sample
Live Demo
Arabic technology terms
Try It
Example with Arabic text demonstrating:
- Right-to-left text rendering
- Proper icon placement
- Correct pill layout
- RTL search behavior
Details
Arabic Support
Full support for Arabic language and script.
Text flows naturally from right to left.
Hebrew Text Example
Real Hebrew language sample
Live Demo
Hebrew technology terms
Try It
Example with Hebrew text demonstrating:
- Right-to-left text rendering
- Hebrew character support
- Proper alignment and spacing
- Natural reading flow
Details
Hebrew Support
Full support for Hebrew language and script.
All UI elements properly mirrored.
RTL Pills Positions
Logical position mirroring (leftโright)
Live Demo
Try It
Logical positioning - positions automatically mirror:
topandbottomstay the sameleftbecomes physically right in RTLrightbecomes physically left in RTL
This ensures pills appear in the correct logical position for RTL languages.
Details
Position Mirroring
Pills positions use logical not physical positioning.
Left/right automatically mirror in RTL mode.
RTL Count Mode
Count badge on left side in RTL
Live Demo
Count text in Arabic with badge on left
Try It
Count mode in RTL:
- Count badge appears on left side
- Count text right-aligned
- Custom callback for i18n (Arabic: "4 ู ุญุฏุฏ")
Details
Count Display RTL
Badge and count text properly positioned for RTL.
Use getCountBadgeCallback for RTL text.
LTR vs RTL Comparison
Side-by-side comparison of LTR and RTL layouts
Live Demo
Differences
Key differences:
- Toggle: Right side (LTR) โ Left side (RTL)
- Text: Left-aligned (LTR) โ Right-aligned (RTL)
- Pills: Remove button right (LTR) โ left (RTL)
- Dropdown: Left-aligned (LTR) โ Right-aligned (RTL)
Details
Layout Comparison
Complete UI mirroring for RTL languages.
All elements properly positioned.
Nested RTL (Inherited)
Component inherits dir='rtl' from parent
Live Demo
This container has dir="rtl"
Component inherits RTL from parent
Try It
RTL mode is inherited from parent elements.
You can set dir="rtl" on:
- The component itself
- Any parent container
- The
<body>or<html>tag
The component will automatically detect and apply RTL styles.
Details
Inheritance
RTL detection checks the component and all ancestors.
No explicit configuration needed.
RTL Configuration
| Feature | LTR Behavior | RTL Behavior | Auto-Mirror |
|---|---|---|---|
| Toggle Icon | Right side | Left side | โ |
| Text Alignment | Left-aligned | Right-aligned | โ |
| Pills Remove Button | Right side of pill | Left side of pill | โ |
| Pills Flow | Left-to-right | Right-to-left | โ |
Position: left | Physically left | Physically right | โ |
Position: right | Physically right | Physically left | โ |
Position: top | Above input | Above input | - |
Position: bottom | Below input | Below input | - |
| Counter | Right side | Left side | โ |
| Dropdown Options | Checkbox left, text left | Checkbox right, text right | โ |
๐ RTL Language Support
- Auto-Detection: Set
dir="rtl"on component or parent - no JavaScript needed - Logical Positioning: Left/right positions automatically mirror for natural RTL layout
- Full UI Mirroring: All elements (toggle, badges, pills, dropdown) properly positioned
- Text Direction: Native browser RTL text rendering for proper script display
- Languages Supported: Arabic, Hebrew, Persian, Urdu, and other RTL languages
- Mixed Content: Works correctly even with mixed LTR/RTL content (numbers, Latin text)