> ## 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](/sdk/web/v2.x.x/primer-headless-checkout/methods/createPaymentMethodManager#card).

<Expandable title="Methods" defaultOpen>
  <ResponseField name="render" type="(container: string, options: HeadlessHostedInputOptions) => Promise<void>">
    Render the input field in the specified container with the given options.

    <Expandable title="HeadlessHostedInputOptions">
      <ResponseField name="placeholder" type="string">
        Optional placeholder text to display in the input element.
      </ResponseField>

      <ResponseField name="ariaLabel" type="string">
        Optional text for the input's aria-label attribute to improve accessibility.
      </ResponseField>

      <ResponseField name="style" type="CheckoutStyle">
        A [CheckoutStyle](/sdk/web/v2.x.x/checkout-style/Overview) 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](/checkout/drop-in/customization#styling-inputs) for Drop-in, `HeadlessHostedInput` accepts the same configuration.
      </ResponseField>
    </Expandable>
  </ResponseField>

  <ResponseField name="getOptions" type="() => HeadlessHostedInputOptions">
    Get the current options for the input field.

    <Expandable title="HeadlessHostedInputOptions">
      <ResponseField name="placeholder" type="string">
        Optional placeholder text to display in the input element.
      </ResponseField>

      <ResponseField name="ariaLabel" type="string">
        Optional text for the input's aria-label attribute to improve accessibility.
      </ResponseField>

      <ResponseField name="style" type="CheckoutStyle">
        A [CheckoutStyle](/sdk/web/v2.x.x/checkout-style/Overview) 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](/checkout/drop-in/customization#styling-inputs) for Drop-in, `HeadlessHostedInput` accepts the same configuration.
      </ResponseField>
    </Expandable>
  </ResponseField>

  <ResponseField name="setOptions" type="(options: HeadlessHostedInputOptions) => void">
    Set the options for the input field.

    <Expandable title="HeadlessHostedInputOptions">
      <ResponseField name="placeholder" type="string">
        Optional placeholder text to display in the input element.
      </ResponseField>

      <ResponseField name="ariaLabel" type="string">
        Optional text for the input's aria-label attribute to improve accessibility.
      </ResponseField>

      <ResponseField name="style" type="CheckoutStyle">
        A [CheckoutStyle](/sdk/web/v2.x.x/checkout-style/Overview) 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](/checkout/drop-in/customization#styling-inputs) for Drop-in, `HeadlessHostedInput` accepts the same configuration.
      </ResponseField>
    </Expandable>
  </ResponseField>

  <ResponseField name="addEventListener" type="(event: EventTypes, callback: EventListener) => void">
    Add an event listener to the input field.

    <Expandable title="Types">
      <ResponseField name="EventTypes" type="&#x22;blur&#x22; | &#x22;change&#x22; | &#x22;click&#x22; | &#x22;close&#x22; | &#x22;error&#x22; | &#x22;focus&#x22;" />

      <ResponseField name="EventListener" type="(event?: Event) => void" />
    </Expandable>
  </ResponseField>

  <ResponseField name="focus" type="() => void">
    Set the focus on the input field.
  </ResponseField>

  <ResponseField name="blur" type="() => void">
    Remove the focus from the input field.
  </ResponseField>

  <ResponseField name="setDisabled" type="(status: boolean) => void">
    Set the disabled status of the input field.
  </ResponseField>
</Expandable>