Layr
⌘K
Ctrl K
Design Systems
Pro
AI Designer
Account
Roadmap
Sign in
Grafana Saga - input
Getting started
Grafana Saga
Grafana UI
Pro
Components
Alert
Badge
Card
Checkbox
Components Status
Field
File Dropzone
Filter Pill
Inline Field
Input
Interactive Table
Modal
Pagination
Plugin Signature
Radio Button
Radio Button Group
Select
Switch
Text
Text Link
Textarea
Toggletip
Tooltip
</head><body> <h1>Input <span class="badge">ready</span> <a href="https://storybook.grafana.com/story/forms-input--simple" class="storybook-link" target="_blank">Storybook</a></h1> <p>A basic component that allows a user to write or edit text.</p> <h2>When to use</h2> <p>Use inputs in forms to help people enter, select, and search for text. Inputs are normally found within a form but can also be part of a modal, search, or card.</p> <h3>Form usage</h3> <p>Inputs should be used with the <strong>Field</strong> component to provide labels and descriptions for the input.</p> <div class="demo-section"> <div class="field-group"> <label class="field-label">Username</label> <input type="text" class="grafana-input" placeholder="Enter username"> </div> </div> <h2>Implementation / Options</h2> <h3>Placeholder text</h3> <p>Input has the ability to have placeholder text. Use placeholder text sparingly, as placeholder text is often confused for actual text. Confusing placeholder text for text often results in higher error rates with users missing inputs that need filled out. When the input is used with field, placeholder text should not be used in favor of using the label and description.</p> <h3>Prefix or suffix inside Input</h3> <p>Input is able to have an element, such as an icon, placed inside the input at the beginning or end. This allows for the creation of inputs like search fields with a magnifying glass icon.</p> <div class="demo-section"> <div class="demo-item"> <h4>With Search Icon Prefix</h4> <div class="input-with-prefix"> <span class="input-prefix"> <span class="icon search-icon"></span> </span> <input type="text" class="grafana-input" placeholder="Search dashboards"> </div> </div> <div class="demo-item"> <h4>With Plus Icon Suffix</h4> <div class="input-with-suffix"> <input type="text" class="grafana-input"> <span class="input-suffix"> <span class="icon plus-icon"></span> </span> </div> </div> </div> <h3>Addon before or after Input</h3> <p>An accessory, commonly a button, that can occur before or after the input.</p> <div class="demo-section"> <div class="demo-item"> <h4>With Button Addon</h4> <div class="input-group"> <input type="text" class="grafana-input"> <div class="input-addon"> <button class="grafana-button secondary">Load</button> </div> </div> </div> </div> <h2>Types and Behaviors</h2> <h3>Text</h3> <p>A text input allows users to enter text, numbers, and special characters into the input.</p> <div class="demo-section"> <div class="demo-item"> <input type="text" class="grafana-input" placeholder="Enter text"> </div> </div> <h3>Number</h3> <p>A number input limits users to only entering numerical characters into the input.</p> <div class="demo-section"> <div class="demo-item"> <input type="number" class="grafana-input" placeholder="Enter number"> </div> </div> <h3>Password</h3> <p>A password input masks the characters entered by the user.</p> <div class="demo-section"> <div class="demo-item"> <input type="password" class="grafana-input" placeholder="Enter password"> </div> </div> <h3>States</h3> <h4>Invalid</h4> <p>The invalid state for the input signifies that the provided content needs correction or additional content needs to be added before the user is able to proceed.</p> <div class="demo-section"> <div class="demo-item"> <input type="text" class="grafana-input invalid" placeholder="Invalid input" value="Invalid content"> </div> </div> <h4>Loading</h4> <p>For some situations, the input is able to indicate that it is loading.</p> <div class="demo-section"> <div class="demo-item"> <input type="text" class="grafana-input loading" placeholder="Loading..."> </div> </div> <h4>Disabled</h4> <p>Depending on user permissions or if an input is synced with a datasource, an input can have a disabled state.</p> <div class="demo-section"> <div class="demo-item"> <input type="text" class="grafana-input" placeholder="Disabled input" disabled> </div> </div> <h2>Playground</h2> <div class="demo-section"> <div class="demo-item"> <h4>Interactive Input</h4> <input type="text" class="grafana-input" placeholder="Try typing here..."> </div> </div> <p> <a href="https://grafana.com/developers/saga/components/forms/input/" target="_blank">Documentation</a> | <a href="https://storybook.grafana.com/story/forms-input--simple" target="_blank">Storybook</a> | <a href="https://github.com/grafana/grafana/tree/main/packages/grafana-ui/src/components/Input" target="_blank">Source code</a> </p></body></html>' width="100%" height="1200" frameborder="0" sandbox="allow-scripts allow-same-origin allow-popups">