ReflexKR

コンポーネント工房：Reflexライブラリ100

講座の概要

レイアウト

Box

Flex

Stack

Grid

Container

Section

Center

Spacer

Separator

Card

Inset

Aspect Ratio

Fragment

タイポグラフィ

Text

Heading

Link

Code

Markdown

Blockquote

Quote

Strong

Kbd

フォーム

Button

Input

Text Area

Checkbox

Switch

Radio Group

Select

Slider

Form

Upload

データ表示

Badge

Avatar

Icon

Callout

List

Data List

Code Block

Progress

Spinner

Scroll Area

Moment

開閉と切り替え

Tabs

Accordion

Segmented Control

オーバーレイ

Tooltip

Popover

Hover Card

Dialog

Alert Dialog

Drawer

Dropdown Menu

Context Menu

Toast

動的レンダリング

Cond

Match

Foreach

Auto Scroll

メディア

Image

Audio

Video

表とデータグリッド

Table

Data Table

Data Editor

チャート

Area Chart

Bar Chart

Line Chart

Composed Chart

Pie Chart

Radar Chart

Radial Bar Chart

Scatter Chart

Funnel Chart

Treemap

Sankey Chart

Error Bar

チャートの部品

Axis

Cartesian Grid

Chart Tooltip

Legend

Label

Reference

Brush

ほかのチャートライブラリ

Plotly

Pyplot

HTML要素

HTML

HTML Text

HTML Layout

HTML Forms

HTML Media

HTML Tables

SVG

そのほかの道具

Theme

Skeleton

Clipboard

Html Embed

Script

Memo

コンポーネント工房：Reflexライブラリ100

HTML要素

HTML Forms

rx.el.fieldsetrx.el.formrx.el.labelrx.el.legendrx.el.meterrx.el.optgrouprx.el.optionrx.el.outputrx.el.progressrx.el.selectrx.el.textarea

公式ドキュメント

工房の注文書

カフェの注文フォーム：ドリンクは種類ごとにまとまったリストから、受け取り方法はラジオで、リクエストは複数行で受け取り、注文したら概要を表示してください。

フォームに関する HTML 要素です。入力をまとめるform、グループの枠fieldsetとその見出しlegend、選択のselect・optgroup・option、複数行入力のtextarea、値を表示するmeter・progress・outputがあります。 Radix のフォームコンポーネント（rx.select、rx.text_area）より軽く、ブラウザが標準で提供する動作をそのまま使います。

Size

rx.el.label(
    "Size ",
    rx.el.select(
        rx.el.option("Small", value="s"),
        rx.el.option("Medium", value="m"),
        rx.el.option("Large", value="l"),
        default_value="m",
        border="1px solid gray",
        padding="2px 6px",
    ),
)

プロパティを変えてみる

meterは、値がよい区間か悪い区間かによって色が変わります。low・highが区間の境界で、optimumがよい側を決めます。

プロパティを変えてみる

value

low

high

optimum

rx.el.div(
    rx.el.meter(value=65, min=0, max=100, low=30, high=80, optimum=90, width="260px", height="20px"),
    rx.el.progress(value=65, max=100, width="260px"),
    display="flex",
    flex_direction="column",
    gap="10px",
)

optimum が low より小さければ低い値がよく、high より大きければ高い値がよいとみなします。progress は進捗バーにすぎず、色は変わりません。

プロパティを変えてみる

placeholder

rows

resize

disabled

read_only

rx.el.textarea(
    placeholder="Write a note",
    rows="4",
    resize="vertical",
    disabled=False,
    read_only=False,
    border="1px solid gray",
    border_radius="6px",
    padding="6px 8px",
    width="280px",
)

rows は表示される行数です。resize は CSS プロパティで、ユーザーが角をドラッグしてサイズを変えられるかを決めます。

プロパティ	値	既定値	用途
`on_submit` (form)	イベントハンドラー	なし（送信を止めるだけ）	`name`ごとの値を入れた dict を受け取る
`reset_on_submit` (form)	`True` / `False`	`False`	送信後に欄を空にする
`no_validate` (form)	`True` / `False`	`False`	ブラウザの`required`・`pattern`チェックを切る
`html_for` (label, output)	要素の`id`	なし	結び付ける入力欄。ラベルをクリックするとその欄に移る
`disabled` (fieldset, select, option, optgroup)	`True` / `False`	`False`	中の入力をすべて無効にする
`value` / `on_change` (select, textarea)	文字列 / イベント	なし	制御入力。`default_value`は非制御
`multiple` `size` (select)	bool / 整数	`False` / なし	複数選択、表示される行数
`label` (optgroup)	文字列	なし	グループの見出し
`rows` `cols` `max_length` (textarea)	整数	なし	サイズと文字数の制限
`auto_height` `enter_key_submit` (textarea)	`True` / `False`	`False`	文章に合わせて高さを伸ばす、Enter で送信
`value` `min` `max` `low` `high` `optimum` (meter)	数値	`min=0` `max=1`	範囲内の測定値
`value` `max` (progress)	数値	`max=1`	進み具合。`value`がなければ処理中の表示

rx.el.form と on_submit

送信ボタンを押すと、on_submitがフォーム内の入力欄の値を、nameをキーにした dict として渡します。チェックボックスはオンのときだけ"on"として入ります。 on_submitがなくても、rx.el.formはブラウザの標準の送信（ページの再読み込み）を止めておきます。reset_on_submit=Trueなら送信後に欄が空になります。

class HtmlFormSignupState(rx.State):
    submitted: dict[str, str] = {}

    @rx.event
    def handle_submit(self, form_data: dict):
        self.submitted = {key: str(value) for key, value in form_data.items()}


rx.el.div(
    rx.el.form(
        rx.el.input(name="email", type="email", placeholder="Email", required=True, border="1px solid gray", padding="4px 8px"),
        rx.el.select(
            rx.el.option("Weekly", value="weekly"),
            rx.el.option("Monthly", value="monthly"),
            name="plan",
            border="1px solid gray",
            padding="4px",
        ),
        rx.el.label(rx.el.input(type="checkbox", name="news"), " Send news"),
        rx.el.button("Sign up", type="submit", padding="4px 12px", border="1px solid gray", border_radius="6px"),
        on_submit=HtmlFormSignupState.handle_submit,
        reset_on_submit=True,
        display="flex",
        gap="8px",
        flex_wrap="wrap",
        align_items="center",
    ),
    rx.el.ul(
        rx.foreach(HtmlFormSignupState.submitted, lambda kv: rx.el.li(rx.el.code(kv[0]), " = ", kv[1])),
        margin_top="10px",
    ),
)

fieldset、legend、label

fieldsetは関連する入力を枠線でまとめ、legendがそのグループの見出しです。fieldsetにdisabled=Trueを渡すと、中の入力がすべて無効になります。 labelは入力欄を包むか、html_forに入力欄のidを書いて結び付けます。結び付いたラベルをクリックすると、入力欄にカーソルが移ります。

Delivery Pickup Courier

Gift wrap (sold out) Wrap itMessage

Coupon

rx.el.div(
    rx.el.fieldset(
        rx.el.legend("Delivery", font_weight="bold"),
        rx.el.label(rx.el.input(type="radio", name="ship", value="pickup", default_checked=True), " Pickup"),
        rx.el.label(rx.el.input(type="radio", name="ship", value="courier"), " Courier"),
        border="1px solid gray",
        border_radius="6px",
        padding="8px 12px",
        display="flex",
        gap="12px",
    ),
    rx.el.fieldset(
        rx.el.legend("Gift wrap (sold out)", font_weight="bold"),
        rx.el.label(rx.el.input(type="checkbox"), " Wrap it"),
        rx.el.label("Message ", rx.el.input(id="htmlforms_gift_msg", border="1px solid gray")),
        disabled=True,
        border="1px solid gray",
        border_radius="6px",
        padding="8px 12px",
        display="flex",
        gap="12px",
        opacity="0.6",
    ),
    rx.el.label("Coupon", html_for="htmlforms_coupon", margin_right="8px"),
    rx.el.input(id="htmlforms_coupon", placeholder="Click the label", border="1px solid gray", padding="2px 6px"),
    display="flex",
    flex_direction="column",
    gap="10px",
    align_items="start",
)

select、optgroup、option

optionが選ぶ項目で、optgroupが項目をlabelの見出しの下にまとめます。disabledの項目は選べません。 valueとon_changeで、選んだ値を State が握ります。multiple=Trueとsizeを渡すと、開いたリストから Ctrl・Shift で複数選べます。

You picked: soup

class HtmlFormSelectState(rx.State):
    dish: str = "soup"

    @rx.event
    def change_dish(self, value: str):
        self.dish = value


rx.el.div(
    rx.el.select(
        rx.el.optgroup(
            rx.el.option("Soup", value="soup"),
            rx.el.option("Salad", value="salad"),
            label="Starters",
        ),
        rx.el.optgroup(
            rx.el.option("Pasta", value="pasta"),
            rx.el.option("Steak (sold out)", value="steak", disabled=True),
            label="Mains",
        ),
        value=HtmlFormSelectState.dish,
        on_change=HtmlFormSelectState.change_dish,
        border="1px solid gray",
        padding="4px",
    ),
    rx.el.p("You picked: ", rx.el.strong(HtmlFormSelectState.dish)),
    rx.el.select(
        rx.el.option("Red"),
        rx.el.option("Green"),
        rx.el.option("Blue"),
        rx.el.option("Black"),
        multiple=True,
        size=3,
        border="1px solid gray",
        width="120px",
    ),
    display="flex",
    flex_direction="column",
    gap="8px",
    align_items="start",
)

textarea：Enter で送信と高さの自動調整

Reflex のrx.el.textareaには、HTML にない属性が2つあります。enter_key_submit=Trueなら Enter でフォームを送信し、Shift+Enter で改行します。 auto_height=Trueなら、文章が長くなるほど高さが伸びます（min_heightと一緒に使います）。enter_key_submitはon_key_downと一緒には使えません。

class HtmlFormChatState(rx.State):
    messages: list[str] = []

    @rx.event
    def send(self, form_data: dict):
        text = str(form_data.get("message", "")).strip()
        if text:
            self.messages = [*self.messages, text][-4:]


rx.el.div(
    rx.el.ul(
        rx.foreach(HtmlFormChatState.messages, lambda m: rx.el.li(m, white_space="pre-wrap")),
        list_style_type="disc",
        padding_left="1.5em",
    ),
    rx.el.form(
        rx.el.textarea(
            name="message",
            placeholder="Type and press Enter",
            enter_key_submit=True,
            auto_height=True,
            max_length=200,
            min_height="40px",
            width="100%",
            border="1px solid gray",
            border_radius="6px",
            padding="6px 8px",
        ),
        on_submit=HtmlFormChatState.send,
        reset_on_submit=True,
    ),
    max_width="360px",
)

output、meter、progress

outputは計算結果を表示する場所で、html_forには計算に使った入力欄のidを空白で区切って書きます。 meterはディスク使用量のように範囲が決まった測定値、progressは作業の進み具合です。progressにvalueを渡さないと「処理中」の表示になります。

+ = 5

Disk Loading

class HtmlFormOutputState(rx.State):
    a: int = 2
    b: int = 3

    @rx.event
    def change_a(self, value: float):
        self.a = int(value)

    @rx.event
    def change_b(self, value: float):
        self.b = int(value)

    @rx.var
    def total(self) -> int:
        return self.a + self.b


rx.el.div(
    rx.el.p(
        rx.el.input(id="htmlforms_a", type="number", value=HtmlFormOutputState.a, on_change=HtmlFormOutputState.change_a, width="60px", border="1px solid gray"),
        " + ",
        rx.el.input(id="htmlforms_b", type="number", value=HtmlFormOutputState.b, on_change=HtmlFormOutputState.change_b, width="60px", border="1px solid gray"),
        " = ",
        rx.el.output(HtmlFormOutputState.total, html_for="htmlforms_a htmlforms_b", name="total", font_weight="bold"),
    ),
    rx.el.label("Disk ", rx.el.meter(value=0.7, low=0.5, high=0.8, optimum=0.2, width="160px")),
    rx.el.label("Loading ", rx.el.progress(width="160px")),
    display="flex",
    flex_direction="column",
    gap="8px",
)

注文書を仕上げる

ドリンクはoptgroupでまとめ、数量は数値入力、受け取り方法はfieldsetの中のラジオ、リクエストはtextareaです。送信すると State が概要をoutputに書きます。

class HtmlFormOrderState(rx.State):
    summary: str = ""

    @rx.event
    def place_order(self, form_data: dict):
        qty = form_data.get("qty") or "1"
        note = str(form_data.get("note", "")).strip() or "none"
        self.summary = f"{qty} x {form_data.get('drink')} ({form_data.get('size')}), {form_data.get('pickup')}. Note: {note}"


rx.el.div(
    rx.el.form(
        rx.el.fieldset(
            rx.el.legend("Your order", font_weight="bold"),
            rx.el.select(
                rx.el.optgroup(rx.el.option("Latte"), rx.el.option("Mocha"), label="Coffee"),
                rx.el.optgroup(rx.el.option("Green tea"), rx.el.option("Chai"), label="Tea"),
                name="drink",
                border="1px solid gray",
                padding="4px",
            ),
            rx.el.select(rx.el.option("Small"), rx.el.option("Large"), name="size", border="1px solid gray", padding="4px"),
            rx.el.input(name="qty", type="number", min=1, max=9, default_value=1, width="60px", border="1px solid gray", padding="4px"),
            display="flex",
            gap="8px",
            flex_wrap="wrap",
            border="1px solid gray",
            border_radius="6px",
            padding="8px 12px",
        ),
        rx.el.fieldset(
            rx.el.legend("Pickup", font_weight="bold"),
            rx.el.label(rx.el.input(type="radio", name="pickup", value="for here", default_checked=True), " For here"),
            rx.el.label(rx.el.input(type="radio", name="pickup", value="to go"), " To go"),
            display="flex",
            gap="12px",
            border="1px solid gray",
            border_radius="6px",
            padding="8px 12px",
        ),
        rx.el.textarea(name="note", placeholder="Notes for the barista", rows=2, border="1px solid gray", border_radius="6px", padding="6px 8px"),
        rx.el.button("Order", type="submit", padding="6px 14px", border="1px solid gray", border_radius="6px", background=rx.color("indigo", 3)),
        on_submit=HtmlFormOrderState.place_order,
        display="flex",
        flex_direction="column",
        gap="10px",
    ),
    rx.el.output(HtmlFormOrderState.summary, display="block", margin_top="10px", font_weight="600"),
    max_width="420px",
)

工房ノート

rx.el.form の on_submit は {name: 値} の dict を受け取る。入力欄ごとに name を付ける。
fieldset + legend でまとめ、fieldset の disabled で一括無効化。label は html_for で id に結び付ける。
select は option・optgroup で、value + on_change で制御。multiple・size で複数選択。
textarea の enter_key_submit・auto_height は Reflex が加えた便利な属性。
meter は low・high・optimum で色が変わる測定値、progress は進捗、output は計算結果。

← 前へ

HTML要素 · HTML Layout

HTML要素 · HTML Media

新しい授業・講座のお知らせを受け取る

この講座に授業が追加されたり、続きの講座が公開されたりしたらメールでお知らせします。

質問と回答

この回について気になることを書き込んでください。すべての言語のページの質問がここに集まります。

ReflexKR

触って学ぶPythonとReflex。すべての例はReflex 0.10.0で実際に動かして確認しています。

ReflexKRはバナー広告なし・無料で運営しています。役に立ったら、コーヒー一杯で応援してください。 ☕ コーヒーで応援する

アフィリエイトと支援について

한국어 English 日本語简体中文 Español Deutsch

Built with Reflex