Loading...

Preview Skeleton

Installation Skeleton

Usage Skeleton

API Reference Skeleton

Usage

1import {2  InputPayment,3  InputPaymentBrandIcon,4  InputPaymentCVC,5  InputPaymentCardNumber,6  InputPaymentExpiry,7  InputPaymentGroup,8  InputPaymentMethodSelector,9  InputPaymentUpiGroup,10  InputPaymentUpiId,11  InputPaymentUpiProviderIcon,12  InputPaymentZip,13  PaymentInput,14  PaymentInputBrandIcon,15  PaymentInputCVC,16  PaymentInputCardNumber,17  PaymentInputExpiry,18  PaymentInputGroup,19  PaymentInputMethodSelector,20  PaymentInputUpiGroup,21  PaymentInputUpiId,22  PaymentInputUpiProviderIcon,23  PaymentInputZip24} from "xiod-ui/input-payment";

1<InputPayment>2  <PaymentInput />3  <InputPaymentGroup>4    <InputPaymentBrandIcon />5    <InputPaymentCVC />6    <InputPaymentCardNumber />7    <InputPaymentExpiry />8    <InputPaymentMethodSelector />9    <InputPaymentUpiId />10    <InputPaymentUpiProviderIcon />11    <InputPaymentZip />12    <PaymentInputBrandIcon />13    <PaymentInputCVC />14    <PaymentInputCardNumber />15    <PaymentInputExpiry />16    <PaymentInputMethodSelector />17    <PaymentInputUpiId />18    <PaymentInputUpiProviderIcon />19    <PaymentInputZip />20  </InputPaymentGroup>21  <InputPaymentUpiGroup>22    <InputPaymentBrandIcon />23    <InputPaymentCVC />24    <InputPaymentCardNumber />25    <InputPaymentExpiry />26    <InputPaymentMethodSelector />27    <InputPaymentUpiId />28    <InputPaymentUpiProviderIcon />29    <InputPaymentZip />30    <PaymentInputBrandIcon />31    <PaymentInputCVC />32    <PaymentInputCardNumber />33    <PaymentInputExpiry />34    <PaymentInputMethodSelector />35    <PaymentInputUpiId />36    <PaymentInputUpiProviderIcon />37    <PaymentInputZip />38  </InputPaymentUpiGroup>39  <PaymentInputGroup>40    <InputPaymentBrandIcon />41    <InputPaymentCVC />42    <InputPaymentCardNumber />43    <InputPaymentExpiry />44    <InputPaymentMethodSelector />45    <InputPaymentUpiId />46    <InputPaymentUpiProviderIcon />47    <InputPaymentZip />48    <PaymentInputBrandIcon />49    <PaymentInputCVC />50    <PaymentInputCardNumber />51    <PaymentInputExpiry />52    <PaymentInputMethodSelector />53    <PaymentInputUpiId />54    <PaymentInputUpiProviderIcon />55    <PaymentInputZip />56  </PaymentInputGroup>57  <PaymentInputUpiGroup>58    <InputPaymentBrandIcon />59    <InputPaymentCVC />60    <InputPaymentCardNumber />61    <InputPaymentExpiry />62    <InputPaymentMethodSelector />63    <InputPaymentUpiId />64    <InputPaymentUpiProviderIcon />65    <InputPaymentZip />66    <PaymentInputBrandIcon />67    <PaymentInputCVC />68    <PaymentInputCardNumber />69    <PaymentInputExpiry />70    <PaymentInputMethodSelector />71    <PaymentInputUpiId />72    <PaymentInputUpiProviderIcon />73    <PaymentInputZip />74  </PaymentInputUpiGroup>75</InputPayment>

Prop	Type	Default
`paymentMethod`	`PaymentMethod` \|`undefined`	-
`defaultPaymentMethod`	`PaymentMethod` \|`undefined`	`card`
`onPaymentMethodChange`	`((method: PaymentMethod) => void)` \|`undefined`	-
`cardNumber`	`string` \|`undefined`	-
`defaultCardNumber`	`string` \|`undefined`	-
`onCardNumberChange`	`((val: string) => void)` \|`undefined`	-
`cardExpiry`	`string` \|`undefined`	-
`defaultCardExpiry`	`string` \|`undefined`	-
`onCardExpiryChange`	`((val: string) => void)` \|`undefined`	-
`cardCvc`	`string` \|`undefined`	-
`defaultCardCvc`	`string` \|`undefined`	-
`onCardCvcChange`	`((val: string) => void)` \|`undefined`	-
`cardZip`	`string` \|`undefined`	-
`defaultCardZip`	`string` \|`undefined`	-
`onCardZipChange`	`((val: string) => void)` \|`undefined`	-
`upiId`	`string` \|`undefined`	-
`defaultUpiId`	`string` \|`undefined`	-
`onUpiIdChange`	`((val: string) => void)` \|`undefined`	-
`disabled`	`boolean` \|`undefined`	`false`
`readOnly`	`boolean` \|`undefined`	`false`
`autoFocusNext`	`boolean` \|`undefined`	`true`
`onValidationChange`	`((isValid: boolean, errors: PaymentInputErrors) => void)` \|`undefined`	-

Prop

Type

Default

Description

paymentMethod

PaymentMethod

|undefined

defaultPaymentMethod

PaymentMethod

|undefined

card

onPaymentMethodChange

((method: PaymentMethod) => void)

|undefined

cardNumber

string

|undefined

defaultCardNumber

string

|undefined

onCardNumberChange

((val: string) => void)

|undefined

cardExpiry

string

|undefined

defaultCardExpiry

string

|undefined

onCardExpiryChange

((val: string) => void)

|undefined

cardCvc

string

|undefined

defaultCardCvc

string

|undefined

onCardCvcChange

((val: string) => void)

|undefined

cardZip

string

|undefined

defaultCardZip

string

|undefined

onCardZipChange

((val: string) => void)

|undefined

upiId

string

|undefined

defaultUpiId

string

|undefined

onUpiIdChange

((val: string) => void)

|undefined

disabled

boolean

|undefined

false

readOnly

boolean

|undefined

false

autoFocusNext

boolean

|undefined

true

onValidationChange

((isValid: boolean, errors: PaymentInputErrors) => void)

|undefined

Prop	Type	Default	Description
`render`	`ReactElement<unknown, string` \|`JSXElementConstructor<any>>` \|`ComponentRenderFn<HTMLProps, {}>` \|`undefined`	-	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.

Prop

Type

Default

Description

render

ReactElement<unknown, string

|JSXElementConstructor<any>>

|ComponentRenderFn<HTMLProps, {}>

|undefined

Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.

Prop	Type	Default	Description
`size`	`number` \|`"default"` \|`"sm"` \|`"lg"` \|`undefined`	`default`
`className`	`string` \|`undefined`	-
`style`	`CSSProperties` \|`undefined`	-
`onChange`	`ChangeEventHandler<HTMLInputElement, Element>` \|`undefined`	-
`onKeyDown`	`KeyboardEventHandler<HTMLInputElement>` \|`undefined`	-
`defaultValue`	`string` \|`number` \|`readonly string[]` \|`undefined`	-	The default value of the input. Use when uncontrolled.
`render`	`ReactElement<unknown, string` \|`JSXElementConstructor<any>>` \|`ComponentRenderFn<HTMLProps, InputState>` \|`undefined`	-	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.
`value`	`string` \|`number` \|`readonly string[]` \|`undefined`	-	The value of the input. Use when controlled.
`onValueChange`	`((value: string, eventDetails: { reason: "none"; event: Event; cancel: () => void; allowPropagation: () => void; isCanceled: boolean; isPropagationAllowed: boolean; trigger: Element` \|`undefined; }) => void)` \|`undefined`	-	Callback fired when the `value` changes. Use when controlled.

Prop

Type

Default

Description

size

number

|"default"

|"sm"

|"lg"

|undefined

default

className

string

|undefined

style

CSSProperties

|undefined

onChange

ChangeEventHandler<HTMLInputElement, Element>

|undefined

onKeyDown

KeyboardEventHandler<HTMLInputElement>

|undefined

defaultValue

string

|number

|readonly string[]

|undefined

The default value of the input. Use when uncontrolled.

render

ReactElement<unknown, string

|JSXElementConstructor<any>>

|ComponentRenderFn<HTMLProps, InputState>

|undefined

Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.

value

string

|number

|readonly string[]

|undefined

The value of the input. Use when controlled.

onValueChange

((value: string, eventDetails: { reason: "none"; event: Event; cancel: () => void; allowPropagation: () => void; isCanceled: boolean; isPropagationAllowed: boolean; trigger: Element

|undefined; }) => void)

|undefined

Callback fired when the `value` changes. Use when controlled.

Prop	Type	Default	Description
`size`	`number` \|`"default"` \|`"sm"` \|`"lg"` \|`undefined`	`default`
`className`	`string` \|`undefined`	-
`style`	`CSSProperties` \|`undefined`	-
`onChange`	`ChangeEventHandler<HTMLInputElement, Element>` \|`undefined`	-
`onKeyDown`	`KeyboardEventHandler<HTMLInputElement>` \|`undefined`	-
`defaultValue`	`string` \|`number` \|`readonly string[]` \|`undefined`	-	The default value of the input. Use when uncontrolled.
`render`	`ReactElement<unknown, string` \|`JSXElementConstructor<any>>` \|`ComponentRenderFn<HTMLProps, InputState>` \|`undefined`	-	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.
`value`	`string` \|`number` \|`readonly string[]` \|`undefined`	-	The value of the input. Use when controlled.
`onValueChange`	`((value: string, eventDetails: { reason: "none"; event: Event; cancel: () => void; allowPropagation: () => void; isCanceled: boolean; isPropagationAllowed: boolean; trigger: Element` \|`undefined; }) => void)` \|`undefined`	-	Callback fired when the `value` changes. Use when controlled.

Prop

Type

Default

Description

size

number

|"default"

|"sm"

|"lg"

|undefined

default

className

string

|undefined

style

CSSProperties

|undefined

onChange

ChangeEventHandler<HTMLInputElement, Element>

|undefined

onKeyDown

KeyboardEventHandler<HTMLInputElement>

|undefined

defaultValue

string

|number

|readonly string[]

|undefined

The default value of the input. Use when uncontrolled.

render

ReactElement<unknown, string

|JSXElementConstructor<any>>

|ComponentRenderFn<HTMLProps, InputState>

|undefined

Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.

value

string

|number

|readonly string[]

|undefined

The value of the input. Use when controlled.

onValueChange

((value: string, eventDetails: { reason: "none"; event: Event; cancel: () => void; allowPropagation: () => void; isCanceled: boolean; isPropagationAllowed: boolean; trigger: Element

|undefined; }) => void)

|undefined

Callback fired when the `value` changes. Use when controlled.

Prop	Type	Default	Description
`size`	`number` \|`"default"` \|`"sm"` \|`"lg"` \|`undefined`	`default`
`className`	`string` \|`undefined`	-
`style`	`CSSProperties` \|`undefined`	-
`onChange`	`ChangeEventHandler<HTMLInputElement, Element>` \|`undefined`	-
`onKeyDown`	`KeyboardEventHandler<HTMLInputElement>` \|`undefined`	-
`defaultValue`	`string` \|`number` \|`readonly string[]` \|`undefined`	-	The default value of the input. Use when uncontrolled.
`render`	`ReactElement<unknown, string` \|`JSXElementConstructor<any>>` \|`ComponentRenderFn<HTMLProps, InputState>` \|`undefined`	-	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.
`value`	`string` \|`number` \|`readonly string[]` \|`undefined`	-	The value of the input. Use when controlled.
`onValueChange`	`((value: string, eventDetails: { reason: "none"; event: Event; cancel: () => void; allowPropagation: () => void; isCanceled: boolean; isPropagationAllowed: boolean; trigger: Element` \|`undefined; }) => void)` \|`undefined`	-	Callback fired when the `value` changes. Use when controlled.

Prop

Type

Default

Description

size

number

|"default"

|"sm"

|"lg"

|undefined

default

className

string

|undefined

style

CSSProperties

|undefined

onChange

ChangeEventHandler<HTMLInputElement, Element>

|undefined

onKeyDown

KeyboardEventHandler<HTMLInputElement>

|undefined

defaultValue

string

|number

|readonly string[]

|undefined

The default value of the input. Use when uncontrolled.

render

ReactElement<unknown, string

|JSXElementConstructor<any>>

|ComponentRenderFn<HTMLProps, InputState>

|undefined

Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.

value

string

|number

|readonly string[]

|undefined

The value of the input. Use when controlled.

onValueChange

((value: string, eventDetails: { reason: "none"; event: Event; cancel: () => void; allowPropagation: () => void; isCanceled: boolean; isPropagationAllowed: boolean; trigger: Element

|undefined; }) => void)

|undefined

Callback fired when the `value` changes. Use when controlled.

Prop	Type	Default	Description
`render`	`ReactElement<unknown, string` \|`JSXElementConstructor<any>>` \|`ComponentRenderFn<HTMLProps, {}>` \|`undefined`	-	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.

Prop

Type

Default

Description

render

ReactElement<unknown, string

|JSXElementConstructor<any>>

|ComponentRenderFn<HTMLProps, {}>

|undefined

Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.

Prop	Type	Default	Description
`value`	`any`	-	The value of the currently active `Tab`. Use when the component is controlled. When the value is `null`, no Tab will be active.
`defaultValue`	`any`	`0`	The default value. Use when the component is not controlled. When the value is `null`, no Tab will be active.
`orientation`	`Orientation` \|`undefined`	`'horizontal'`	The component orientation (layout flow direction).
`onValueChange`	`((value: any, eventDetails: TabsRootChangeEventDetails) => void)` \|`undefined`	-	Callback invoked when new value is being set. The event `reason` is `'none'` for user-initiated changes, such as a click or keyboard navigation; `'initial'` for the first automatic selection or fallback in uncontrolled roots when `defaultValue` is omitted or `undefined`, including when the implicit initial value is disabled or missing; `'disabled'` for automatic fallback when the selected tab becomes disabled in uncontrolled roots; or `'missing'` for automatic fallback when the selected tab is removed, or when an explicit `defaultValue` never matches a mounted tab in uncontrolled roots. For automatic changes, the selected value can be `null` when no enabled Tab is available as a fallback. Automatic changes cannot be canceled; calling `eventDetails.cancel()` for `'initial'`, `'disabled'`, or `'missing'` has no effect.
`className`	`string` \|`((state: TabsRootState) => string` \|`undefined)` \|`undefined`	-	CSS class applied to the element, or a function that returns a class based on the component's state.
`render`	`ReactElement<unknown, string` \|`JSXElementConstructor<any>>` \|`ComponentRenderFn<HTMLProps, TabsRootState>` \|`undefined`	-	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.
`style`	`CSSProperties` \|`((state: TabsRootState) => CSSProperties` \|`undefined)` \|`undefined`	-	Style applied to the element, or a function that returns a style object based on the component's state.

Prop

Type

Default

Description

value

any

The value of the currently active `Tab`. Use when the component is controlled. When the value is `null`, no Tab will be active.

defaultValue

any

0

The default value. Use when the component is not controlled. When the value is `null`, no Tab will be active.

orientation

Orientation

|undefined

'horizontal'

The component orientation (layout flow direction).

onValueChange

((value: any, eventDetails: TabsRootChangeEventDetails) => void)

|undefined

Callback invoked when new value is being set. The event `reason` is `'none'` for user-initiated changes, such as a click or keyboard navigation; `'initial'` for the first automatic selection or fallback in uncontrolled roots when `defaultValue` is omitted or `undefined`, including when the implicit initial value is disabled or missing; `'disabled'` for automatic fallback when the selected tab becomes disabled in uncontrolled roots; or `'missing'` for automatic fallback when the selected tab is removed, or when an explicit `defaultValue` never matches a mounted tab in uncontrolled roots. For automatic changes, the selected value can be `null` when no enabled Tab is available as a fallback. Automatic changes cannot be canceled; calling `eventDetails.cancel()` for `'initial'`, `'disabled'`, or `'missing'` has no effect.

className

string

|((state: TabsRootState) => string

|undefined)

|undefined

CSS class applied to the element, or a function that returns a class based on the component's state.

render

ReactElement<unknown, string

|JSXElementConstructor<any>>

|ComponentRenderFn<HTMLProps, TabsRootState>

|undefined

Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.

style

CSSProperties

|((state: TabsRootState) => CSSProperties

|undefined)

|undefined

Style applied to the element, or a function that returns a style object based on the component's state.

Prop	Type	Default	Description
`render`	`ReactElement<unknown, string` \|`JSXElementConstructor<any>>` \|`ComponentRenderFn<HTMLProps, {}>` \|`undefined`	-	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.

Prop

Type

Default

Description

render

ReactElement<unknown, string

|JSXElementConstructor<any>>

|ComponentRenderFn<HTMLProps, {}>

|undefined

Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.

Prop	Type	Default	Description
`size`	`number` \|`"default"` \|`"sm"` \|`"lg"` \|`undefined`	`default`
`className`	`string` \|`undefined`	-
`style`	`CSSProperties` \|`undefined`	-
`onChange`	`ChangeEventHandler<HTMLInputElement, Element>` \|`undefined`	-
`onKeyDown`	`KeyboardEventHandler<HTMLInputElement>` \|`undefined`	-
`defaultValue`	`string` \|`number` \|`readonly string[]` \|`undefined`	-	The default value of the input. Use when uncontrolled.
`render`	`ReactElement<unknown, string` \|`JSXElementConstructor<any>>` \|`ComponentRenderFn<HTMLProps, InputState>` \|`undefined`	-	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.
`value`	`string` \|`number` \|`readonly string[]` \|`undefined`	-	The value of the input. Use when controlled.
`onValueChange`	`((value: string, eventDetails: { reason: "none"; event: Event; cancel: () => void; allowPropagation: () => void; isCanceled: boolean; isPropagationAllowed: boolean; trigger: Element` \|`undefined; }) => void)` \|`undefined`	-	Callback fired when the `value` changes. Use when controlled.

Prop

Type

Default

Description

size

number

|"default"

|"sm"

|"lg"

|undefined

default

className

string

|undefined

style

CSSProperties

|undefined

onChange

ChangeEventHandler<HTMLInputElement, Element>

|undefined

onKeyDown

KeyboardEventHandler<HTMLInputElement>

|undefined

defaultValue

string

|number

|readonly string[]

|undefined

The default value of the input. Use when uncontrolled.

render

ReactElement<unknown, string

|JSXElementConstructor<any>>

|ComponentRenderFn<HTMLProps, InputState>

|undefined

Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.

value

string

|number

|readonly string[]

|undefined

The value of the input. Use when controlled.

onValueChange

((value: string, eventDetails: { reason: "none"; event: Event; cancel: () => void; allowPropagation: () => void; isCanceled: boolean; isPropagationAllowed: boolean; trigger: Element

|undefined; }) => void)

|undefined

Callback fired when the `value` changes. Use when controlled.

Prop	Type	Default	Description
`render`	`ReactElement<unknown, string` \|`JSXElementConstructor<any>>` \|`ComponentRenderFn<HTMLProps, {}>` \|`undefined`	-	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.

Prop

Type

Default

Description

render

ReactElement<unknown, string

|JSXElementConstructor<any>>

|ComponentRenderFn<HTMLProps, {}>

|undefined

Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.

Prop	Type	Default	Description
`size`	`number` \|`"default"` \|`"sm"` \|`"lg"` \|`undefined`	`default`
`className`	`string` \|`undefined`	-
`style`	`CSSProperties` \|`undefined`	-
`onChange`	`ChangeEventHandler<HTMLInputElement, Element>` \|`undefined`	-
`onKeyDown`	`KeyboardEventHandler<HTMLInputElement>` \|`undefined`	-
`defaultValue`	`string` \|`number` \|`readonly string[]` \|`undefined`	-	The default value of the input. Use when uncontrolled.
`render`	`ReactElement<unknown, string` \|`JSXElementConstructor<any>>` \|`ComponentRenderFn<HTMLProps, InputState>` \|`undefined`	-	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.
`value`	`string` \|`number` \|`readonly string[]` \|`undefined`	-	The value of the input. Use when controlled.
`onValueChange`	`((value: string, eventDetails: { reason: "none"; event: Event; cancel: () => void; allowPropagation: () => void; isCanceled: boolean; isPropagationAllowed: boolean; trigger: Element` \|`undefined; }) => void)` \|`undefined`	-	Callback fired when the `value` changes. Use when controlled.

Prop

Type

Default

Description

size

number

|"default"

|"sm"

|"lg"

|undefined

default

className

string

|undefined

style

CSSProperties

|undefined

onChange

ChangeEventHandler<HTMLInputElement, Element>

|undefined

onKeyDown

KeyboardEventHandler<HTMLInputElement>

|undefined

defaultValue

string

|number

|readonly string[]

|undefined

The default value of the input. Use when uncontrolled.

render

ReactElement<unknown, string

|JSXElementConstructor<any>>

|ComponentRenderFn<HTMLProps, InputState>

|undefined

Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.

value

string

|number

|readonly string[]

|undefined

The value of the input. Use when controlled.

onValueChange

((value: string, eventDetails: { reason: "none"; event: Event; cancel: () => void; allowPropagation: () => void; isCanceled: boolean; isPropagationAllowed: boolean; trigger: Element

|undefined; }) => void)

|undefined

Callback fired when the `value` changes. Use when controlled.

Loading...

Preview Skeleton

Installation Skeleton

Usage Skeleton

API Reference Skeleton

Input Payment

Preview

Installation

Usage

Imports

Anatomy

API Reference

InputPayment

InputPaymentBrandIcon

InputPaymentCVC

InputPaymentCardNumber

InputPaymentExpiry

InputPaymentGroup

InputPaymentMethodSelector

InputPaymentUpiGroup

InputPaymentUpiId

InputPaymentUpiProviderIcon

InputPaymentZip