Page History
...
| Token | Description |
|---|---|
| labelTranslations | Label text on scanner button with multi-language support |
| dialogTitleTranslations | Title text in scan dialog with multi-language support |
| alternativeInputLabelTranslations | Label for manual input field in dialog with multi-language support |
| confirmButtonLabelTranslations | Label text for the confirmation button in dialog with multi-language support |
| closeDialogOnSuccess | Auto-closes dialog after a successful scan |
| hidden | Controls whether the component is visible in the form |
| saveInLocalStorage | Persists scanned value in local storage across sessions |
| defaultValue | Sets an initial value used when form is reset |
| readonly | Displays value but disables scanning |
| dataField | Field name for submitting form data |
| controlsRequestType | Defines how data is sent in HTTP request (BODY, HEADER, PATH) |
| authorizationDisable | Policy set defining when scanner is disabled |
| events | Configurable component events |
| ON_INIT (Events) | Event triggered when component is initialized |
| ON_DESTROY (Events) | Event triggered when component is removed from DOM |
| ON_SCAN_START (Events) | Event triggered when user activates scanner |
| ON_SCAN_SUCCESS (Events) | Event triggered when a code is successfully scanned |
| ON_SCAN_ERROR (Events) | Event triggered when an error occurs during scanning |
| dataTestId | Identifier for automated testing |
...
- authorizationDisable – Specifies a policy set that determines when the component should be disabled. For example, setting to "readOnlyPolicy" will disable the scanner for users who don't have scan permissions according to the specified policy.
Links
- Figma: https://www.figma.com/design/yck1tcUXgdQ5aYX6iUAwrO/GE---Astronaut-Design-System?node-id=15534-397394&t=ftfrOGkPzlG2GaTo-1
Guidelines
[NO DATA AVAILABLE]
Accessibility
...
Usage
- Capture QR/bar/visual codes with a clear CTA. Set the button text via
labelTranslations(e.g., “Scan code”). - Provide a manual fallback in the dialog. Configure
alternativeInputLabelTranslationsandconfirmButtonLabelTranslations. - Control presence within the form. Toggle visibility using
hidden.
States & Feedback
- Display-only mode when editing isn’t allowed. Use
readonlyto show a value and disable scanning. - Control completion flow after success. Use
closeDialogOnSuccess(truefor single scan,falsefor batches). - Define reset behavior. Use
defaultValueto restore a known value on form reset.
Data-Driven / Conditional Behavior
- Persist—or deliberately don’t. Use
saveInLocalStoragefor repetitive workflows; leave off for sensitive data.
Visibility & Authorization
- Disable by policy. Apply
authorizationDisableto keep the control visible but non-interactive when scanning isn’t permitted. - Show a value while blocking interaction. Combine
readonlywithauthorizationDisableto communicate state and permissions.
Content & Localization
- Localize all visible strings. Provide
labelTranslations,dialogTitleTranslations,alternativeInputLabelTranslations, andconfirmButtonLabelTranslations. - Name the target explicitly. In
dialogTitleTranslations, specify the code type (e.g., “Scan QR code”). - Keep CTA concise. Use short verbs in
labelTranslationsto reduce truncation.
Dos & Don’ts
| Do | Don’t | Article setting(s) |
|---|---|---|
| Localize the button label, dialog title, manual-entry label, and confirm action. | Ship English-only text. | labelTranslations, dialogTitleTranslations, alternativeInputLabelTranslations, confirmButtonLabelTranslations |
| Offer a manual entry path inside the dialog. | Rely solely on camera scanning. | alternativeInputLabelTranslations, confirmButtonLabelTranslations |
| Auto-close after a single successful scan. | Auto-close during batch scanning. | closeDialogOnSuccess |
| Persist the last scanned value for repeat workflows. | Persist sensitive codes across sessions. | saveInLocalStorage |
| Show values while preventing edits. | Hide the control when the value must remain visible. | readonly, hidden |
| Bind and route the value correctly in requests. | Send the value in the wrong channel (e.g., HEADER when the API expects BODY). | dataField, controlsRequestType |
| Keep the control visible but disabled when users lack permission. | Hide permission-gated actions with no feedback. | authorizationDisable, hidden |
| Use a stable test hook for automation. | Target dynamic labels/selectors in tests. | dataTestId |
Accessibility
- Localized labels and titles. Use
labelTranslationsanddialogTitleTranslationsso assistive tech announces clear actions and context. - Non-interactive display when needed. Use
readonlyto prevent scanning while presenting values. - Predictable completion. Use
closeDialogOnSuccessto reduce extra steps when a single scan completes. - Concise, specific copy. Keep all
*Translationsshort and understandable; avoid jargon. - No color-only meaning. (No color tokens are exposed.) Ensure clarity via labels and dialog titles.
- Permission clarity. Prefer
authorizationDisableto signal disabled state; reservehiddenfor cases where the control must not be discoverable.
