PaymentOption
Install
yarn add @ntds/payment-selection
Import
import { PaymentSelection } from '@ntds/payment-selection';
Usage
<PaymentSelection
label='Betalingsmåte'
name='payment-selection'
value={paymentOption}
setValue={setPaymentOption}
>
<PaymentSelection.Option
value='Label'
...
>
Label
</PaymentSelection.Option>
...
</PaymentSelection>
Props
PaymentOption
| Prop | Type & Description |
|---|---|
| icon | ComponentType<{ size?: string; className?: string; }> Icon that will be displayed on the left side of the PaymentOption |
| name | string Name of PaymentOption. This name prop will be received from the Selection |
| subText | ReactNode Text that will be displayed below the main content. |
| twSubTextColor | TwClassNames Custom color for the subText |
| srOnlyLabel | string Text to further describe the subText for the screen reader |
| value | string Value of PaymentOption |
| checked | string | boolean Whether or not the checkbox is checked. Controlled by the Selection |
| onChange | (value: string) => void A callback that gets triggered when a PaymentOption is clicked |
| children | ReactNode Usually simple text, but can be anything. Pass in multiple elements to have them stacked in a column |