RTL01 Basic RTL
Auto-detected from dir='rtl' attribute
Demo
Toggle icon on left, text right-aligned
Controls
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
Description
Auto-Detection
Set dir="rtl" on the component or any parent element.
All UI elements automatically mirror for RTL languages.
RTL02 Arabic Text Example
Real Arabic language sample
Demo
Arabic technology terms
Controls
Example with Arabic text demonstrating:
- Right-to-left text rendering
- Proper icon placement
- Correct pill layout
- RTL search behavior
Description
Arabic Support
Full support for Arabic language and script.
Text flows naturally from right to left.
RTL03 Hebrew Text Example
Real Hebrew language sample
Demo
Hebrew technology terms
Controls
Example with Hebrew text demonstrating:
- Right-to-left text rendering
- Hebrew character support
- Proper alignment and spacing
- Natural reading flow
Description
Hebrew Support
Full support for Hebrew language and script.
All UI elements properly mirrored.
RTL04 RTL Pills Positions
Logical position mirroring (leftโright)
Demo
Controls
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.
Description
Position Mirroring
Pills positions use logical not physical positioning.
Left/right automatically mirror in RTL mode.
RTL05 RTL Count Mode
Count badge on left side in RTL
Demo
Count text in Arabic with badge on left
Controls
Count mode in RTL:
- Count badge appears on left side
- Count text right-aligned
- Custom callback for i18n (Arabic: "4 ู ุญุฏุฏ")
Description
Count Display RTL
Badge and count text properly positioned for RTL.
Use getCountBadgeCallback for RTL text.
RTL06 LTR vs RTL Comparison
Side-by-side comparison of LTR and RTL layouts
Demo
Controls
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)
Description
Layout Comparison
Complete UI mirroring for RTL languages.
All elements properly positioned.
RTL07 Nested RTL (Inherited)
Component inherits dir='rtl' from parent
Demo
This container has dir="rtl"
Component inherits RTL from parent
Controls
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.
Description
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)