mirror of
https://github.com/supabase/supabase.git
synced 2026-10-05 17:35:10 +03:00
Gildas Garcia
18e4ad227e
## Screenshots On a number input with units: <img width="660" height="162" alt="image" src="https://github.com/user-attachments/assets/1758a6d9-0836-4d41-80d1-97a03292db91" /> focused state: <img width="651" height="71" alt="image" src="https://github.com/user-attachments/assets/a92a5c39-2c7e-4c5f-9e4b-eb89810cc45c" /> On a textarea: <img width="989" height="294" alt="image" src="https://github.com/user-attachments/assets/cc696cb9-3671-4719-bdd8-daa1aea4f041" />
52 lines
1.7 KiB
Plaintext
52 lines
1.7 KiB
Plaintext
---
|
|
title: Data Input
|
|
description: Set, read, or copy a value on a single line.
|
|
component: true
|
|
---
|
|
|
|
<ComponentPreview name="data-input-demo" peekCode wide />
|
|
|
|
Referred to as `Input` in code, not `DataInput`. Also not to be confused with the atomic [Input](../components/input) component.
|
|
|
|
## Usage
|
|
|
|
### Read-only values
|
|
|
|
Input should be used for read-only values that can be copied or otherwise interacted with, as the input element is both keyboard and mouse-friendly.
|
|
|
|
<ComponentPreview name="data-input-with-copy" peekCode wide />
|
|
|
|
### Sensitive values
|
|
|
|
Inputs with sensitive values can be both revealed _and_ copied, but only in succession. This reduces the amount of actions on screen, thus simplifying the interface.
|
|
|
|
<ComponentPreview name="data-input-with-reveal-copy" peekCode wide />
|
|
|
|
Inputs can be edited without revealing their value.
|
|
|
|
<ComponentPreview name="data-input-with-reveal-copy-editable" peekCode wide />
|
|
|
|
You can also partially truncate the value by overriding the placeholder value.
|
|
|
|
Consider if the value needs to be revealed in the first place, as only copying is sufficient in most cases.
|
|
|
|
A happy medium might be to display a partially masked value but saving the actual value in the clipboard. To do this, pass a pre-masked string as the `value` prop and override the `onCopy` callback to copy the real value.
|
|
|
|
<ComponentPreview name="data-input-with-copy-secret" peekCode wide />
|
|
|
|
### Password managers
|
|
|
|
In some cases, you may need to add the following attribute to your input to prevent password managers from applying their widgets and dropdowns to the input:
|
|
|
|
```jsx
|
|
<Input
|
|
readOnly
|
|
copy
|
|
value={name}
|
|
data-1p-ignore // 1Password
|
|
data-lpignore="true" // LastPass
|
|
data-form-type="other" // Dashlane
|
|
data-bwignore // Bitwarden
|
|
/>
|
|
```
|