HTML

Reflex also provides a set of HTML elements that can be used to create web pages. These elements are the same as the HTML elements that are used in web development. These elements come unstyled bhy default. You can style them using style props or tailwindcss classes.

The following is a list of the HTML elements that are available in Reflex:

API Reference

rx.el.A

Display the 'a' element.

Prop	Type \| Values	Default
`download`	`Union[str, bool]`
`href`	`str`
`href_lang`	`str`
`media`	`str`
`ping`	`str`
`referrer_policy`	`"" \| "no-referrer" \| ...`
`rel`	`str`
`target`	`"_self" \| "_blank" \| ...`

Event Triggers

See the full list of default event triggers

rx.el.Abbr

Display the abbr element.

Props

No component specific props

Event Triggers

See the full list of default event triggers

rx.el.Address

Display the address element.

Props

No component specific props

Event Triggers

See the full list of default event triggers

rx.el.Area

Display the area element.

Prop	Type \| Values	Default
`alt`	`str`
`coords`	`str`
`download`	`Union[str, bool]`
`href`	`str`
`href_lang`	`str`
`media`	`str`
`referrer_policy`	`"" \| "no-referrer" \| ...`
`rel`	`str`
`shape`	`str`
`target`	`str`

Event Triggers

See the full list of default event triggers

rx.el.Article

Display the article element.

Props

No component specific props

Event Triggers

See the full list of default event triggers

rx.el.Aside

Display the aside element.

Props

No component specific props

Event Triggers

See the full list of default event triggers

rx.el.Audio

Display the audio element.

Prop	Type \| Values	Default
`auto_play`	`bool`
`controls`	`bool`
`cross_origin`	`"anonymous" \| "use-credentials" \| ...`
`loop`	`bool`
`muted`	`bool`
`preload`	`str`
`src`	`str`

Event Triggers

See the full list of default event triggers

rx.el.B

Display the b element.

Props

No component specific props

Event Triggers

See the full list of default event triggers

rx.el.Bdi

Display the bdi element.

Props

No component specific props

Event Triggers

See the full list of default event triggers

rx.el.Bdo

Display the bdo element.

Props

No component specific props

Event Triggers

See the full list of default event triggers

rx.el.Blockquote

Display the blockquote element.

Prop	Type \| Values	Default
`cite`	`str`

Event Triggers

See the full list of default event triggers

rx.el.Body

Display the body element.

Props

No component specific props

Event Triggers

See the full list of default event triggers

rx.el.Br

Display the br element.

Props

No component specific props

Event Triggers

See the full list of default event triggers

rx.el.Button

Display the button element.

Prop	Type \| Values	Default
`auto_focus`	`bool`
`disabled`	`bool`
`form`	`str`
`form_action`	`str`
`form_enc_type`	`str`
`form_method`	`str`
`form_no_validate`	`bool`
`form_target`	`str`
`name`	`str`
`type`	`"submit" \| "reset" \| ...`
`value`	`Union[str, int, float]`

Event Triggers

See the full list of default event triggers

rx.el.Canvas

Display the canvas element.

Props

No component specific props

Event Triggers

See the full list of default event triggers

rx.el.Caption

Display the caption element.

Props

No component specific props

Event Triggers

See the full list of default event triggers

rx.el.Cite

Display the cite element.

Props

No component specific props

Event Triggers

See the full list of default event triggers

rx.el.Code

Display the code element.

Props

No component specific props

Event Triggers

See the full list of default event triggers

rx.el.Col

Display the col element.

Prop	Type \| Values	Default
`span`	`int`

Event Triggers

See the full list of default event triggers

rx.el.Colgroup

Display the colgroup element.

Prop	Type \| Values	Default
`span`	`int`

Event Triggers

See the full list of default event triggers

rx.el.Data

Display the data element.

Prop	Type \| Values	Default
`value`	`Union[str, int, float]`

Event Triggers

See the full list of default event triggers

rx.el.Dd

Display the dd element.

Props

No component specific props

Event Triggers

See the full list of default event triggers

rx.el.Del

Display the del element.

Prop	Type \| Values	Default
`cite`	`str`
`date_time`	`str`

Event Triggers

See the full list of default event triggers

rx.el.Details

Display the details element.

Prop	Type \| Values	Default
`open`	`bool`

Event Triggers

See the full list of default event triggers

rx.el.Dfn

Display the dfn element.

Props

No component specific props

Event Triggers

See the full list of default event triggers

rx.el.Dialog

Display the dialog element.

Prop	Type \| Values	Default
`open`	`bool`

Event Triggers

See the full list of default event triggers

rx.el.Div

Display the div element.

Props

No component specific props

Event Triggers

See the full list of default event triggers

rx.el.Dl

Display the dl element.

Props

No component specific props

Event Triggers

See the full list of default event triggers

rx.el.Dt

Display the dt element.

Props

No component specific props

Event Triggers

See the full list of default event triggers

rx.el.Em

Display the em element.

Props

No component specific props

Event Triggers

See the full list of default event triggers

rx.el.Embed

Display the embed element.

Prop	Type \| Values	Default
`src`	`str`
`type`	`str`

Event Triggers

See the full list of default event triggers

rx.el.Fieldset

Display the fieldset element.

Prop	Type \| Values	Default
`disabled`	`bool`
`form`	`str`
`name`	`str`

Event Triggers

See the full list of default event triggers

rx.el.Figcaption

Display the figcaption element.

Props

No component specific props

Event Triggers

See the full list of default event triggers

Display the footer element.

Props

No component specific props

Event Triggers

See the full list of default event triggers

rx.el.Form

Display the form element.

Prop	Type \| Values	Default
`accept`	`str`
`accept_charset`	`str`
`action`	`str`
`auto_complete`	`str`
`enc_type`	`str`
`method`	`str`
`name`	`str`
`no_validate`	`bool`
`target`	`str`
`reset_on_submit`	`bool`	`Var.create(False)`
`handle_submit_unique_name`	`str`

Event Triggers

See the full list of default event triggers

Trigger	Description
`on_submit`	Fired when the form is submitted

rx.el.H1

Display the h1 element.

Props

No component specific props

Event Triggers

See the full list of default event triggers

rx.el.H2

Display the h1 element.

Props

No component specific props

Event Triggers

See the full list of default event triggers

rx.el.H3

Display the h1 element.

Props

No component specific props

Event Triggers

See the full list of default event triggers

rx.el.H4

Display the h1 element.

Props

No component specific props

Event Triggers

See the full list of default event triggers

rx.el.H5

Display the h1 element.

Props

No component specific props

Event Triggers

See the full list of default event triggers

rx.el.H6

Display the h1 element.

Props

No component specific props

Event Triggers

See the full list of default event triggers

rx.el.Head

Display the head element.

Props

No component specific props

Event Triggers

See the full list of default event triggers

Display the header element.

Props

No component specific props

Event Triggers

See the full list of default event triggers

rx.el.Hr

Display the hr element.

Props

No component specific props

Event Triggers

See the full list of default event triggers

rx.el.Html

Display the html element.

Prop	Type \| Values	Default
`manifest`	`str`

Event Triggers

See the full list of default event triggers

rx.el.I

Display the i element.

Props

No component specific props

Event Triggers

See the full list of default event triggers

rx.el.Iframe

Display the iframe element.

Prop	Type \| Values	Default
`allow`	`str`
`loading`	`"eager" \| "lazy"`
`name`	`str`
`referrer_policy`	`"" \| "no-referrer" \| ...`
`sandbox`	`str`
`src`	`str`
`src_doc`	`str`

Event Triggers

See the full list of default event triggers

rx.el.Img

Display the img element.

Prop	Type \| Values	Default
`alt`	`str`
`cross_origin`	`"anonymous" \| "use-credentials" \| ...`
`decoding`	`"async" \| "auto" \| ...`
`loading`	`"eager" \| "lazy"`
`referrer_policy`	`"" \| "no-referrer" \| ...`
`sizes`	`str`
`src`	`Any`
`src_set`	`str`
`use_map`	`str`

Event Triggers

See the full list of default event triggers

rx.el.Input

Display the input element.

Prop	Type \| Values	Default
`accept`	`str`
`alt`	`str`
`auto_complete`	`str`
`auto_focus`	`bool`
`capture`	`"True" \| "False" \| ...`
`checked`	`bool`
`default_checked`	`bool`
`default_value`	`Union[str, int, float]`
`disabled`	`bool`
`form`	`str`
`form_action`	`str`
`form_enc_type`	`str`
`form_method`	`str`
`form_no_validate`	`bool`
`form_target`	`str`
`list`	`str`
`max`	`Union[str, int, float]`
`max_length`	`Union[int, float]`
`min_length`	`Union[int, float]`
`min`	`Union[str, int, float]`
`multiple`	`bool`
`name`	`str`
`pattern`	`str`
`placeholder`	`str`
`read_only`	`bool`
`required`	`bool`
`size`	`Union[int, float]`
`src`	`str`
`step`	`Union[str, int, float]`
`type`	`"button" \| "checkbox" \| ...`
`value`	`Union[str, int, float]`

Event Triggers

See the full list of default event triggers

Trigger	Description
`on_focus`	Fired when the input gains focus
`on_blur`	Fired when the input loses focus
`on_change`	Fired when the input value changes
`on_key_down`	Fired when a key is pressed down
`on_key_up`	Fired when a key is released

rx.el.Ins

Display the ins element.

Prop	Type \| Values	Default
`cite`	`str`
`date_time`	`str`

Event Triggers

See the full list of default event triggers

rx.el.Kbd

Display the kbd element.

Props

No component specific props

Event Triggers

See the full list of default event triggers

rx.el.Label

Display the label element.

Prop	Type \| Values	Default
`html_for`	`str`
`form`	`str`

Event Triggers

See the full list of default event triggers

rx.el.Legend

Display the legend element.

Props

No component specific props

Event Triggers

See the full list of default event triggers

rx.el.Li

Display the li element.

Props

No component specific props

Event Triggers

See the full list of default event triggers

rx.el.Link

Display the link element.

Prop	Type \| Values	Default
`cross_origin`	`"anonymous" \| "use-credentials" \| ...`
`href`	`str`
`href_lang`	`str`
`integrity`	`str`
`media`	`str`
`referrer_policy`	`"" \| "no-referrer" \| ...`
`rel`	`str`
`sizes`	`str`
`type`	`str`

Event Triggers

See the full list of default event triggers

rx.el.Main

Display the main element.

Props

No component specific props

Event Triggers

See the full list of default event triggers

rx.el.Mark

Display the mark element.

Props

No component specific props

Event Triggers

See the full list of default event triggers

rx.el.Math

Display the math element.

Props

No component specific props

Event Triggers

See the full list of default event triggers

rx.el.Meta

Display the meta element.

Prop	Type \| Values	Default
`char_set`	`str`
`content`	`str`
`http_equiv`	`str`
`name`	`str`

Event Triggers

See the full list of default event triggers

rx.el.Meter

Display the meter element.

Prop	Type \| Values	Default
`form`	`str`
`high`	`Union[int, float]`
`low`	`Union[int, float]`
`max`	`Union[int, float]`
`min`	`Union[int, float]`
`optimum`	`Union[int, float]`
`value`	`Union[int, float]`

Event Triggers

See the full list of default event triggers

rx.el.Nav

Display the nav element.

Props

No component specific props

Event Triggers

See the full list of default event triggers

rx.el.Noscript

Display the noscript element.

Props

No component specific props

Event Triggers

See the full list of default event triggers

rx.el.Object

Display the object element.

Prop	Type \| Values	Default
`data`	`str`
`form`	`str`
`name`	`str`
`type`	`str`
`use_map`	`str`

Event Triggers

See the full list of default event triggers

rx.el.Ol

Display the ol element.

Prop	Type \| Values	Default
`reversed`	`bool`
`start`	`int`
`type`	`"1" \| "a" \| ...`

Event Triggers

See the full list of default event triggers

rx.el.Optgroup

Display the optgroup element.

Prop	Type \| Values	Default
`disabled`	`bool`
`label`	`str`

Event Triggers

See the full list of default event triggers

rx.el.Option

Display the option element.

Prop	Type \| Values	Default
`disabled`	`bool`
`label`	`str`
`selected`	`bool`
`value`	`Union[str, int, float]`

Event Triggers

See the full list of default event triggers

rx.el.Output

Display the output element.

Prop	Type \| Values	Default
`html_for`	`str`
`form`	`str`
`name`	`str`

Event Triggers

See the full list of default event triggers

rx.el.P

Display the p element.

Props

No component specific props

Event Triggers

See the full list of default event triggers

rx.el.Picture

Display the picture element.

Props

No component specific props

Event Triggers

See the full list of default event triggers

rx.el.Portal

Display the portal element.

Props

No component specific props

Event Triggers

See the full list of default event triggers

rx.el.Pre

Display the pre element.

Props

No component specific props

Event Triggers

See the full list of default event triggers

rx.el.Progress

Display the progress element.

Prop	Type \| Values	Default
`form`	`str`
`max`	`Union[str, int, float]`
`value`	`Union[str, int, float]`

Event Triggers

See the full list of default event triggers

rx.el.Q

Display the q element.

Prop	Type \| Values	Default
`cite`	`str`

Event Triggers

See the full list of default event triggers

rx.el.Rp

Display the rp element.

Props

No component specific props

Event Triggers

See the full list of default event triggers

rx.el.Rt

Display the rt element.

Props

No component specific props

Event Triggers

See the full list of default event triggers

rx.el.Ruby

Display the ruby element.

Props

No component specific props

Event Triggers

See the full list of default event triggers

rx.el.S

Display the s element.

Props

No component specific props

Event Triggers

See the full list of default event triggers

rx.el.Samp

Display the samp element.

Props

No component specific props

Event Triggers

See the full list of default event triggers

rx.el.Script

Display the script element.

Prop	Type \| Values	Default
`async_`	`bool`
`char_set`	`str`
`cross_origin`	`"anonymous" \| "use-credentials" \| ...`
`defer`	`bool`
`integrity`	`str`
`referrer_policy`	`"" \| "no-referrer" \| ...`
`src`	`str`
`type`	`str`

Event Triggers

See the full list of default event triggers

rx.el.Section

Display the section element.

Props

No component specific props

Event Triggers

See the full list of default event triggers

rx.el.Select

Display the select element.

Prop	Type \| Values	Default
`auto_complete`	`str`
`auto_focus`	`bool`
`disabled`	`bool`
`form`	`str`
`multiple`	`bool`
`name`	`str`
`required`	`bool`
`size`	`int`

Event Triggers

See the full list of default event triggers

Trigger	Description
`on_change`	Fired when the select value changes

rx.el.Small

Display the small element.

Props

No component specific props

Event Triggers

See the full list of default event triggers

rx.el.Source

Display the source element.

Prop	Type \| Values	Default
`media`	`str`
`sizes`	`str`
`src`	`str`
`src_set`	`str`
`type`	`str`

Event Triggers

See the full list of default event triggers

rx.el.Span

Display the span element.

Props

No component specific props

Event Triggers

See the full list of default event triggers

rx.el.Strong

Display the strong element.

Props

No component specific props

Event Triggers

See the full list of default event triggers

rx.el.Sub

Display the sub element.

Props

No component specific props

Event Triggers

See the full list of default event triggers

rx.el.Sup

Display the sup element.

Props

No component specific props

Event Triggers

See the full list of default event triggers

rx.el.svg.circle

The SVG circle component.

Prop	Type \| Values	Default
`cx`	`Union[str, int]`
`cy`	`Union[str, int]`
`r`	`Union[str, int]`
`path_length`	`int`

Event Triggers

See the full list of default event triggers

rx.el.svg.defs

Display the defs element.

Props

No component specific props

Event Triggers

See the full list of default event triggers

rx.el.svg.linear_gradient

Display the linearGradient element.

Prop	Type \| Values	Default
`gradient_units`	`Union[str, bool]`
`gradient_transform`	`Union[str, bool]`
`spread_method`	`Union[str, bool]`
`x1`	`Union[str, int, float]`
`x2`	`Union[str, int, float]`
`y1`	`Union[str, int, float]`
`y2`	`Union[str, int, float]`

Event Triggers

See the full list of default event triggers

rx.el.svg.polygon

The SVG polygon component.

Prop	Type \| Values	Default
`points`	`str`
`path_length`	`int`

Event Triggers

See the full list of default event triggers

rx.el.svg.path

Display the path element.

Prop	Type \| Values	Default
`d`	`Union[str, int, float]`

Event Triggers

See the full list of default event triggers

rx.el.svg.rect

The SVG rect component.

Prop	Type \| Values	Default
`x`	`Union[str, int]`
`y`	`Union[str, int]`
`width`	`Union[str, int]`
`height`	`Union[str, int]`
`rx`	`Union[str, int]`
`ry`	`Union[str, int]`
`path_length`	`int`

Event Triggers

See the full list of default event triggers

rx.el.svg.stop

Display the stop element.

Prop	Type \| Values	Default
`offset`	`Union[str, int, float]`
`stop_color`	`Union[str, Color, bool]`
`stop_opacity`	`Union[str, float, int, bool]`

Event Triggers

See the full list of default event triggers

rx.el.Table

Display the table element.

Prop	Type \| Values	Default
`align`	`"left" \| "center" \| ...`
`summary`	`str`

Event Triggers

See the full list of default event triggers

rx.el.Tbody

Display the tbody element.

Props

No component specific props

Event Triggers

See the full list of default event triggers

rx.el.Td

Display the td element.

Prop	Type \| Values	Default
`align`	`"left" \| "center" \| ...`
`col_span`	`int`
`headers`	`str`
`row_span`	`int`

Event Triggers

See the full list of default event triggers

rx.el.Template

Display the template element.

Props

No component specific props

Event Triggers

See the full list of default event triggers

rx.el.Textarea

Display the textarea element.

Prop	Type \| Values	Default
`auto_complete`	`str`
`auto_focus`	`bool`
`auto_height`	`bool`
`cols`	`int`
`default_value`	`str`
`dirname`	`str`
`disabled`	`bool`
`enter_key_submit`	`bool`
`form`	`str`
`max_length`	`int`
`min_length`	`int`
`name`	`str`
`placeholder`	`str`
`read_only`	`bool`
`required`	`bool`
`rows`	`int`
`value`	`str`
`wrap`	`str`

Event Triggers

See the full list of default event triggers

Trigger	Description
`on_focus`	Fired when the input gains focus
`on_blur`	Fired when the input loses focus
`on_change`	Fired when the input value changes
`on_key_down`	Fired when a key is pressed down
`on_key_up`	Fired when a key is released

rx.el.Tfoot

Display the tfoot element.

Props

No component specific props

Event Triggers

See the full list of default event triggers

rx.el.Th

Display the th element.

Prop	Type \| Values	Default
`align`	`"left" \| "center" \| ...`
`col_span`	`int`
`headers`	`str`
`row_span`	`int`
`scope`	`str`

Event Triggers

See the full list of default event triggers

rx.el.Thead

Display the thead element.

Props

No component specific props

Event Triggers

See the full list of default event triggers

rx.el.Time

Display the time element.

Prop	Type \| Values	Default
`date_time`	`str`

Event Triggers

See the full list of default event triggers

rx.el.Title

Display the title element.

Props

No component specific props

Event Triggers

See the full list of default event triggers

rx.el.Tr

Display the tr element.

Props

No component specific props

Event Triggers

See the full list of default event triggers

rx.el.Track

Display the track element.

Prop	Type \| Values	Default
`default`	`bool`
`kind`	`str`
`label`	`str`
`src`	`str`
`src_lang`	`str`

Event Triggers

See the full list of default event triggers

rx.el.U

Display the u element.

Props

No component specific props

Event Triggers

See the full list of default event triggers

rx.el.Ul

Display the ul element.

Props

No component specific props

Event Triggers

See the full list of default event triggers

rx.el.Video

Display the video element.

Prop	Type \| Values	Default
`auto_play`	`bool`
`controls`	`bool`
`cross_origin`	`"anonymous" \| "use-credentials" \| ...`
`loop`	`bool`
`muted`	`bool`
`plays_inline`	`bool`
`poster`	`str`
`preload`	`str`
`src`	`str`

Event Triggers

See the full list of default event triggers

rx.el.Wbr

Display the wbr element.

Props

No component specific props

Event Triggers

See the full list of default event triggers

Learn

Components

Deploy

API Reference

HTML

API Reference

rx.el.A

Event Triggers

rx.el.Abbr

Props

Event Triggers

rx.el.Address

Props

Event Triggers

rx.el.Area

Event Triggers

rx.el.Article

Props

Event Triggers

rx.el.Aside

Props

Event Triggers

rx.el.Audio

Event Triggers

rx.el.B

Props

Event Triggers

rx.el.Bdi

Props

Event Triggers

rx.el.Bdo

Props

Event Triggers

rx.el.Blockquote

Event Triggers

rx.el.Body

Props

Event Triggers

rx.el.Br

Props

Event Triggers

rx.el.Button

Event Triggers

rx.el.Canvas

Props

Event Triggers

rx.el.Caption

Props

Event Triggers

rx.el.Cite

Props

Event Triggers

rx.el.Code

Props

Event Triggers

rx.el.Col

Event Triggers

rx.el.Colgroup

Event Triggers

rx.el.Data

Event Triggers

rx.el.Dd

Props

Event Triggers

rx.el.Del

Event Triggers

rx.el.Details

Event Triggers

rx.el.Dfn

Props

Event Triggers

rx.el.Dialog

Event Triggers

rx.el.Div

Props

Event Triggers

rx.el.Dl

Props

Event Triggers

rx.el.Dt