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 |
...
- Figma: https://www.figma.com/design/yck1tcUXgdQ5aYX6iUAwrO/GE---Astronaut-Design-System?node-id=15534-397394&t=ftfrOGkPzlG2GaTo-1
- Live style guide: tba
Guidelines
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.
...
