Text
The quick brown fox jumps over the lazy dog.
As another element
Use the as_ prop to render text as a p, label, div or span. This prop is purely semantic and does not alter visual appearance.
This is a paragraph element.
Size
Use the size prop to control text size. This prop also provides correct line height and corrective letter spacing—as text size increases, the relative line height and letter spacing decrease.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
Sizes 2–4 are designed to work well for long-form content. Sizes 1–3 are designed to work well for UI labels.
Weight
Use the weight prop to set the text weight.
ExpandCollapse
Align
Use the align prop to set text alignment.
Trim
Use the trim prop to trim the leading space at the start, end, or both sides of the text box.
Without Trim
With Trim
ExpandCollapse
Trimming the leading is useful when dialing in vertical spacing in cards or other “boxy” components. Otherwise, padding looks larger on top and bottom than on the sides.
Without trim
The goal of typography is to relate font size, line height, and line width in a proportional way that maximizes beauty and makes reading easier and more pleasant.
With trim
The goal of typography is to relate font size, line height, and line width in a proportional way that maximizes beauty and makes reading easier and more pleasant.
ExpandCollapse
Color
Use the color_scheme prop to assign a specific color, ignoring the global theme.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
High Contrast
Use the high_contrast prop to increase color contrast with the background.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
ExpandCollapse
With formatting
Compose Text with formatting components to add emphasis and structure to content.
Look, such a helpful link, an italic emphasis a piece of computer code, and even a hotkey combination ⇧⌘A within the text.
Preformmatting
By Default, the browser renders multiple white spaces into one. To preserve whitespace, use the white_space = "pre" css prop.
This is not pre formatted
This is pre formatted
With form controls
Composing text with a form control like checkbox, radiogroup, or switch automatically centers the control with the first line of text, even when the text is multi-line.
API Reference
rx.text
A foundational text primitive based on the <span> element.
Preview
sizeweightaligncolor_schemehigh_contrastProps
| Prop | Type | Description |
|---|---|---|
access_key | str | Provides a hint for generating a keyboard shortcut for the current element. |
auto_capitalize | "off""none""on""sentences""words""characters" | Controls whether and how text input is automatically capitalized as it is entered/edited by the user. |
content_editable | "inherit""plaintext-only" | Indicates whether the element's content is editable. |
context_menu | str | Defines the ID of a <menu> element which will serve as the element's context menu. |
dir | str | Defines the text direction. Allowed values are ltr (Left-To-Right) or rtl (Right-To-Left). |
draggable | bool | Defines whether the element can be dragged. |
enter_key_hint | "enter""done""go""next""previous""search""send" | Hints what media types the media element is able to play. |
hidden | bool | Defines whether the element is hidden. |
input_mode | "none""text""tel""url""email""numeric""decimal""search" | Defines the type of the element. |
item_prop | str | Defines the name of the element for metadata purposes. |
lang | str | Defines the language used in the element. |
role | "alert""alertdialog""application""article""banner""button""cell""checkbox""columnheader""combobox""complementary""contentinfo""definition""dialog""directory""document""feed""figure""form""grid""gridcell""group""heading""img""link""list""listbox""listitem""log""main""marquee""math""menu""menubar""menuitem""menuitemcheckbox""menuitemradio""navigation""none""note""option""presentation""progressbar""radio""radiogroup""region""row""rowgroup""rowheader""scrollbar""search""searchbox""separator""slider""spinbutton""status""switch""tab""table""tablist""tabpanel""term""textbox""timer""toolbar""tooltip""tree""treegrid""treeitem" | Defines the role of the element. |
slot | str | Assigns a slot in a shadow DOM shadow tree to an element. |
spell_check | bool | Defines whether the element may be checked for spelling errors. |
tab_index | int | Defines the position of the current element in the tabbing order. |
title | str | Defines a tooltip for the element. |
as_child | bool | Change the default rendered element for the one passed as a child, merging their props and behavior. |
as_ | "p""label""div""span""b""i""u""abbr""cite""del""em""ins""kbd""mark""s""samp""sub""sup" | Change the default rendered element into a semantically appropriate alternative (cannot be used with asChild). |
size | "1""2""3""4""5""6""7""8""9" | Text size: "1" - "9". |
weight | "light""regular""medium""bold" | Thickness of text: "light" | "regular" | "medium" | "bold". |
align | "left""center""right" | Alignment of text in element: "left" | "center" | "right". |
trim | "normal""start""end""both" | Removes the leading trim space: "normal" | "start" | "end" | "both". |
color_scheme | "tomato""red""ruby""crimson""pink""plum""purple""violet""iris""indigo""blue""cyan""teal""jade""green""grass""brown""orange""sky""mint""lime""yellow""amber""gold""bronze""gray" | Overrides the accent color inherited from the Theme. |
high_contrast | bool | Whether to render the text with higher contrast color. |
Event Triggers
See the full list of default event triggersrx.text.em
Marks text to stress emphasis.
Props
| Prop | Type | Description |
|---|---|---|
access_key | str | Provides a hint for generating a keyboard shortcut for the current element. |
auto_capitalize | "off""none""on""sentences""words""characters" | Controls whether and how text input is automatically capitalized as it is entered/edited by the user. |
content_editable | "inherit""plaintext-only" | Indicates whether the element's content is editable. |
context_menu | str | Defines the ID of a <menu> element which will serve as the element's context menu. |
dir | str | Defines the text direction. Allowed values are ltr (Left-To-Right) or rtl (Right-To-Left). |
draggable | bool | Defines whether the element can be dragged. |
enter_key_hint | "enter""done""go""next""previous""search""send" | Hints what media types the media element is able to play. |
hidden | bool | Defines whether the element is hidden. |
input_mode | "none""text""tel""url""email""numeric""decimal""search" | Defines the type of the element. |
item_prop | str | Defines the name of the element for metadata purposes. |
lang | str | Defines the language used in the element. |
role | "alert""alertdialog""application""article""banner""button""cell""checkbox""columnheader""combobox""complementary""contentinfo""definition""dialog""directory""document""feed""figure""form""grid""gridcell""group""heading""img""link""list""listbox""listitem""log""main""marquee""math""menu""menubar""menuitem""menuitemcheckbox""menuitemradio""navigation""none""note""option""presentation""progressbar""radio""radiogroup""region""row""rowgroup""rowheader""scrollbar""search""searchbox""separator""slider""spinbutton""status""switch""tab""table""tablist""tabpanel""term""textbox""timer""toolbar""tooltip""tree""treegrid""treeitem" | Defines the role of the element. |
slot | str | Assigns a slot in a shadow DOM shadow tree to an element. |
spell_check | bool | Defines whether the element may be checked for spelling errors. |
tab_index | int | Defines the position of the current element in the tabbing order. |
title | str | Defines a tooltip for the element. |