> ## Documentation Index
> Fetch the complete documentation index at: https://primer.io/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# HeadlessHostedInput

The hosted input instances inside the object returned by a
[CardPaymentMethodManager's `createHostedInputs` function](https://primer.io/docs/sdk/web/v2.x.x/primer-headless-checkout/methods/createPaymentMethodManager#card).

**Methods**

**render** `(container: string, options: HeadlessHostedInputOptions) =\> Promise\<void\>`

Render the input field in the specified container with the given options.

**HeadlessHostedInputOptions**

**placeholder** `string`

Optional placeholder text to display in the input element.

**ariaLabel** `string`

Optional text for the input's aria-label attribute to improve accessibility.

**style** `CheckoutStyle`

A [CheckoutStyle](https://primer.io/docs/sdk/web/v2.x.x/checkout-style/Overview.md) object that defines the CSS styles to apply to the input element.

For more details and examples you can refer to the guide on [Styling Inputs](https://primer.io/docs/checkout/drop-in/customization.md#styling-inputs) for Drop-in, `HeadlessHostedInput` accepts the same configuration.

**getOptions** `() =\> HeadlessHostedInputOptions`

Get the current options for the input field.

**HeadlessHostedInputOptions**

**placeholder** `string`

Optional placeholder text to display in the input element.

**ariaLabel** `string`

Optional text for the input's aria-label attribute to improve accessibility.

**style** `CheckoutStyle`

A [CheckoutStyle](https://primer.io/docs/sdk/web/v2.x.x/checkout-style/Overview.md) object that defines the CSS styles to apply to the input element.

For more details and examples you can refer to the guide on [Styling Inputs](https://primer.io/docs/checkout/drop-in/customization.md#styling-inputs) for Drop-in, `HeadlessHostedInput` accepts the same configuration.

**setOptions** `(options: HeadlessHostedInputOptions) =\> void`

Set the options for the input field.

**HeadlessHostedInputOptions**

**placeholder** `string`

Optional placeholder text to display in the input element.

**ariaLabel** `string`

Optional text for the input's aria-label attribute to improve accessibility.

**style** `CheckoutStyle`

A [CheckoutStyle](https://primer.io/docs/sdk/web/v2.x.x/checkout-style/Overview.md) object that defines the CSS styles to apply to the input element.

For more details and examples you can refer to the guide on [Styling Inputs](https://primer.io/docs/checkout/drop-in/customization.md#styling-inputs) for Drop-in, `HeadlessHostedInput` accepts the same configuration.

**addEventListener** `(event: EventTypes, callback: EventListener) =\> void`

Add an event listener to the input field.

**Types**

**EventTypes** `"blur" | "change" | "click" | "close" | "error" | "focus"`

**EventListener** `(event?: Event) =\> void`

**focus** `() =\> void`

Set the focus on the input field.

**blur** `() =\> void`

Remove the focus from the input field.

**setDisabled** `(status: boolean) =\> void`

Set the disabled status of the input field.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.