PaymentOption
Install
yarn add @ntds/payment-selectionImport
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
| Prop | Type | Default | Description |
|---|---|---|---|
icon? | ComponentType<DirectionalIconProps> | — | 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 |