diff --git a/.changeset/better-textbox-docs.md b/.changeset/better-textbox-docs.md new file mode 100644 index 00000000000..9e77288cf78 --- /dev/null +++ b/.changeset/better-textbox-docs.md @@ -0,0 +1,5 @@ +--- +"gradio": minor +--- + +docs: Add "Common Patterns" section to Textbox component docs diff --git a/js/_website/src/lib/templates/gradio/03_components/textbox.svx b/js/_website/src/lib/templates/gradio/03_components/textbox.svx index b3248e8e86b..cb7b486c3e6 100644 --- a/js/_website/src/lib/templates/gradio/03_components/textbox.svx +++ b/js/_website/src/lib/templates/gradio/03_components/textbox.svx @@ -44,6 +44,41 @@ gradio.Textbox(···) ### Shortcuts {/if} +### Common Patterns + +#### Multi-line text input + +By default, `gr.Textbox` renders as a single-line input. For longer text such as paragraphs or code, set `lines` to show multiple rows and optionally `max_lines` to cap the height: + +```python +import gradio as gr + +def summarize(text): + return f"Received {len(text.split())} words." + +demo = gr.Interface( + fn=summarize, + inputs=gr.Textbox(lines=5, max_lines=10, label="Paste your text here"), + outputs="text", +) +``` + +#### Password and sensitive input + +Set `type="password"` to mask characters as the user types. The value is passed as plain text to your function — masking is display-only: + +```python +import gradio as gr + +def check(password): + return "Access granted" if password == "secret" else "Wrong password" + +demo = gr.Interface( + fn=check, + inputs=gr.Textbox(type="password", label="Enter password"), + outputs="text", +) +``` {#if obj.demos && obj.demos.length > 0}