ba-input-secure-field
An input component that can be used with the secure fields/PCI proxy library
Airframe
Web Components
React
React Native
Anatomy
Label
The label of the input. Gives meaning and context to the input
Hint text
Gives the input some extra information to help the user
Input
The input of the component. This is just a container which can be used by other libraries to insert a input into.
Design Documentation
This component is designed to be used with a secure fields library. This means the component doesn't actually contain an input as this is added via an iFrame when using a secure fields library.
Alternatively an input can be slotted into the component.
Live Demo
<ba-input-secure-field
label="Card number"
proxy-id="card-number">
</ba-input-secure-field>
Properties and attributes
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
hasFocus |
has-focus |
Whether the input has focus | boolean | undefined |
undefined |
hintText |
hint-text |
Hint text to show above the input | string | undefined |
undefined |
invalid |
invalid |
Whether the input is invalid | boolean | undefined |
false |
label(required) |
label |
Label for the input | string |
undefined |
proxyId(required) |
proxy-id |
The id of the input | string |
undefined |
required |
required |
Whether the input is required | boolean | undefined |
false |
Permitted ARIA roles
- None
Slots
| Slot | Description | Permitted elements |
|---|---|---|
"error" |
Element will be rendered in the error slot | <p> |
Parent components
ba-input-secure-field can be slotted into:
<ba‑accordion><ba‑card><ba‑card‑segmented><ba‑details><ba‑flex><ba‑form><ba‑form‑group><ba‑form‑group‑dropdown><ba‑grid>
Usage
Basic usage
Using the component with ba-form. When using with a custom secure library you may need to style the input to match BAgel.
Reach out to us and we can provide the correct styles.
<ba-form>
<ba-input-secure-field
label="Card number"
name="cardNumber"
proxy-id="card-number"
id="card-number"
required
>
</ba-input-secure-field>
<ba-button>Submit</ba-button>
</ba-form>
<script>
// Run any custom library code after the component has loaded
</script>Guidelines
Always use the label attribute to give a meaningful label to the field.
Further reading:
Disabled form elements are not supported in BAgel because they create accessibility challenges, such as preventing keyboard navigation, confusing screen reader users, and reducing visual clarity for those with impairments
Further reading:
Placeholders on inputs are not supported in BAgel because they create accessibility challenges, such as failing to provide persistent labels for screen readers, reducing color contrast for users with visual impairments, and causing confusion for those with cognitive difficulties.
If you would like to add a infomations to help the user fill the input, you can use the hint-text attribute.
Further reading:
Keyboard navigation
No keyboard interactions have been defined for this component.
Usage and accessibility checklist
Use this checklist to confirm the component has been configured and used correctly.
UX checklist
- Make sure a value is added for the proxy-id attribute
Accessibility checklist
- Make sure a label is provided