ReflexKR

Reflex公式ドキュメント

コンポーネント工房：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

フォーム

Input

rx.inputrx.input.slot

公式ドキュメント

工房の注文書

ニュースレターの購読欄を作ってください。メールアドレスを1行で受け取り、形式が正しくなければ送信できないようにしてください。

rx.inputは1行のテキストを入力する欄です。検索語、名前、メールアドレス、パスワードのような短い値を受け取るときに使います。複数行が必要なら Text Area を使います。

rx.input(placeholder="Search the docs")

プロパティを変えてみる

typeを変えると、同じ欄がパスワード欄、日付ピッカー、カラーピッカーに変わります。それ以外は見た目を決めるプロパティです。

プロパティを変えてみる

placeholder

type

variant

size

color

radius

disabled

read_only

rx.input(placeholder="Search the docs", type="text", variant="surface", size="2", color_scheme="indigo", radius="medium", disabled=False, read_only=False)

variant は classic · surface · soft の3種類です。read_only は値を表示するだけ、disabled は薄く表示してフォーカスも受け付けません。

プロパティ	値	既定値	用途
`placeholder`	文字列	なし	空のときに薄く表示される案内文
`type`	`"text"` `"password"` `"email"` `"number"` `"date"` …	`"text"`	HTML の`<input type>`と同じ入力の種類
`value` / `default_value`	文字列・数値	なし	制御する値 / 最初に一度だけ入れる値
`variant`	`"classic"` `"surface"` `"soft"`	`"surface"`	見た目
`size`	`"1"` ~ `"3"`	`"2"`	高さと文字サイズ
`color_scheme`, `radius`	Radix の色名 / `"none"` ~ `"full"`	テーマの値	アクセントカラーと角の丸み
`name`, `required`	文字列 / `True`	なし	フォーム送信時の名前、空なら送信を止める
`max_length`, `min_length`, `pattern`	数値 / 正規表現	なし	ブラウザがチェックする文字数・形式
`min`, `max`, `step`	数値	なし	`type="number"`・`"date"`などの範囲と刻み
`disabled`, `read_only`, `auto_focus`	`True` / `False`	`False`	無効化、読み取り専用、ページを開いたらすぐフォーカス
`auto_complete`	`True` / `False`	ブラウザの値	ブラウザの自動補完。公式ドキュメントには`"off"`のような文字列も書かれているが、0.10 は bool しか受け付けない
`on_change`	イベント		値が変わったとき。新しい値（文字列）を渡す
`on_blur`, `on_focus`	イベント		フォーカスを失ったとき / 得たとき。`on_blur`も値を渡す
`on_key_down`, `on_key_up`	イベント		キーを押したとき / 離したとき。キー名を渡す

on_blur：書き終えて離れるときに一度だけ

on_blurは欄からフォーカスが外れたときに一度だけ呼ばれます。欄の外をクリックしたり Tab で次へ移ったりすると、その時点の値が State に届きます。1文字ごとにサーバーを呼ぶ必要がないときに向いています。

Hello World!

class InputBlurState(rx.State):
    text: str = "Hello World!"

    @rx.event
    def set_text(self, value: str):
        self.text = value


rx.vstack(
    rx.heading(InputBlurState.text, size="5"),
    rx.input(placeholder="Type, then click outside", on_blur=InputBlurState.set_text),
)

制御入力：value + on_change

valueに State の値を渡し、on_changeでその値を更新すると、欄の内容は常に State と一致します。これを制御（controlled）入力と呼びます。サーバー側で値を変えれば欄も追従します。

rx.inputはvalueとon_changeを一緒に受け取ると、内部でデバウンス入力（DebounceInput）で包みます。入力中はすぐ画面に表示され、サーバーには少し（既定で 300ms）手が止まったときに一度だけ送ります。そのため State が値を持っていても入力が途切れません。

Hello World!

class InputControlledState(rx.State):
    text: str = "Hello World!"

    @rx.event
    def set_text(self, value: str):
        self.text = value


rx.vstack(
    rx.heading(InputControlledState.text, size="5"),
    rx.input(
        placeholder="Type here",
        value=InputControlledState.text,
        on_change=InputControlledState.set_text,
    ),
)

valueを使わずon_changeやon_blurだけを使うと非制御（uncontrolled）入力です。初期値はdefault_valueで入れ、その後はブラウザが値を保持します。

スロット：アイコンや文字を添える

rx.input.slotを子要素に入れると、欄の内側にアイコンや短い文字が付きます。side="right"なら右側に付きます。スロットはcolor_schemeも個別に受け取ります。

@example.com

rx.vstack(
    rx.input(
        rx.input.slot(rx.icon("search", size=16)),
        placeholder="Search the docs",
    ),
    rx.input(
        rx.input.slot(rx.icon("at-sign", size=16)),
        rx.input.slot(rx.text("@example.com", size="1"), side="right"),
        placeholder="username",
    ),
)

入力の種類（type）

typeは HTML の<input type>と同じ値を受け取ります。"text"（既定）、"password"、"email"、"number"、"date"、"time"、"url"、"color"などがあり、ブラウザが適した入力ツールを表示します。全一覧は MDN の input のドキュメントにあります。

rx.vstack(
    rx.input(placeholder="Username", type="text"),
    rx.input(placeholder="Password", type="password"),
    rx.input(placeholder="Email", type="email"),
    rx.input(type="number", min=0, max=10, step=1, default_value="3"),
    rx.input(type="date"),
    rx.input(type="color", default_value="#3e63dd", width="80px"),
)

フォームで送信する

フォーム内の入力はnameがないと送信データに名前: 値として入りません。required=Trueなら、空のときブラウザが送信を止めます。patternとmax_lengthもブラウザが送信前にチェックします。下の2つ目の欄は数字3桁だけが通ります。

Results:

{}

class InputFormState(rx.State):
    form_data: dict = {}

    @rx.event
    def handle_submit(self, form_data: dict):
        self.form_data = form_data


rx.card(
    rx.vstack(
        rx.form.root(
            rx.hstack(
                rx.input(name="username", placeholder="Username", required=True),
                rx.input(name="code", placeholder="3 digits", pattern="[0-9]{3}", max_length=3),
                rx.button("Submit", type="submit"),
            ),
            on_submit=InputFormState.handle_submit,
            reset_on_submit=True,
        ),
        rx.divider(),
        rx.hstack(rx.text("Results:", weight="bold"), rx.badge(InputFormState.form_data.to_string())),
    ),
)

フォームそのものは Form のページで詳しく扱います。

State なしで値を変える：rx.set_value

rx.set_value("id", 値)はidで指定した入力の値をその場で変えます。State 変数を作らずに欄を空にしたり埋めたりするときに使います。

rx.hstack(
    rx.input(id="input_erase_demo", default_value="Erase me"),
    rx.button("Erase", on_click=rx.set_value("input_erase_demo", "")),
    rx.button("Fill", on_click=rx.set_value("input_erase_demo", "Hello"), variant="soft"),
)

キーボードイベント

on_key_downはキーを押すたびにキー名（"Enter"、"a" …）を渡します。Enter で何かを実行したいなら、たいていは入力をフォームに入れるほうが簡単です。

Last key: -

class InputKeyState(rx.State):
    last_key: str = "-"

    @rx.event
    def on_key(self, key: str):
        self.last_key = key


rx.vstack(
    rx.input(placeholder="Press any key", on_key_down=InputKeyState.on_key),
    rx.text("Last key: ", rx.code(InputKeyState.last_key)),
)

注文書を仕上げる

type="email"とrequired=Trueでブラウザが先に形式をチェックし、フォームが Enter とボタンによる送信をまとめて処理します。受け取ったアドレスは最新の3件だけ表示します。

class InputNewsletterState(rx.State):
    emails: list[str] = []

    @rx.event
    def subscribe(self, form_data: dict):
        email = form_data.get("email", "").strip()
        if email and email not in self.emails:
            self.emails = (self.emails + [email])[-3:]


rx.vstack(
    rx.form(
        rx.hstack(
            rx.input(
                rx.input.slot(rx.icon("mail", size=16)),
                name="email",
                type="email",
                placeholder="you@example.com",
                required=True,
                flex="1",
            ),
            rx.button("Subscribe", type="submit"),
            width="100%",
        ),
        on_submit=InputNewsletterState.subscribe,
        reset_on_submit=True,
        width="100%",
    ),
    rx.foreach(InputNewsletterState.emails, lambda e: rx.badge(e, variant="soft")),
    width="100%",
    max_width="420px",
)

工房ノート

rx.input(placeholder=...) で作り、type で入力の種類を選ぶ。
on_blur は書き終えて離れるときに一度だけ、value + on_change は制御入力（自動デバウンス）。
アイコンは rx.input.slot、右側に付けるなら side="right"。
フォームでは name がキーになり、required · pattern · max_length をブラウザがチェックする。
State なしで値を変えるときは rx.set_value("id", 値)。

← 前へ

フォーム · Button

フォーム · Text Area

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

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

質問と回答

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

ReflexKR

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

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

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

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

Built with Reflex