Components

Input

(external link)

ld-input #

The ld-input component can be used in forms to accept data from the user. While the native HTML input element supports a wide variety of types of input data and offers different control widgets, depending on the user agent, this component supports only a subset of the types available in the native HTML input element. All officially supported types of ld-input are documented here. Other form input widgets either have been implemented as separate components or may eventually be concidered for implementation in the future.

This component can be used in conjunction with the ld-label and the ld-input-message component.

Examples #

Default #

By default, the ld-input component is of type text.

<ld-input placeholder="Placeholder"></ld-input>

<div class="ld-input">
  <input placeholder="Placeholder">
</div>

<LdInput placeholder="Placeholder" />

With value #

<ld-input placeholder="Placeholder" value="Hello"></ld-input>

<div class="ld-input">
  <input placeholder="Placeholder" value="Hello">
</div>

<LdInput placeholder="Placeholder" value="Hello" />

Disabled #

<ld-input placeholder="Placeholder" disabled></ld-input>

<div class="ld-input ld-input--disabled">
  <input placeholder="Placeholder" disabled>
</div>

<LdInput placeholder="Placeholder" disabled />

If you want the input to stay focusable even if it is disabled, use aria-disabled in place of disabled:

<ld-input placeholder="Placeholder" aria-disabled="true"></ld-input>

<div class="ld-input ld-input--disabled">
  <input
    placeholder="Placeholder"
    aria-disabled="true"
    id="focusable-disabled-input-1">
</div>

<!-- Example code for input prevention on aria-disabled input elements -->
<script>
;(() => {
  const input = document.currentScript.previousElementSibling.querySelector('input')
  const initialValue = input.value
  input.addEventListener('input', () => {
    input.value = initialValue
  })
})()
</script>

<LdInput placeholder="Placeholder" aria-disabled="true" />

When aria-disabled is applied on the input, the component will try to prevent user input by resetting the input to its previous value on each input event. However, if you are using the CSS component version of ld-input with aria-disabled, you will have to prevent the default behaviour of the input element yourself.

Dark #

Dark tone inputs should only be used on white backgrounds.

<ld-input tone="dark" placeholder="Placeholder"></ld-input>

<div class="ld-input ld-input--dark">
  <input placeholder="Placeholder">
</div>

<LdInput tone="dark" placeholder="Placeholder" />

Invalid #

<ld-input invalid placeholder="Placeholder"></ld-input>

<div class="ld-input ld-input--invalid">
  <input placeholder="Placeholder">
</div>

<LdInput invalid placeholder="Placeholder" />

Type date #

The ld-input component of type="date" acts as a wrapper around the native input element oftype="date", fully relying on its built-in features and only enhancing it visually.
The component is lightweight, respects the user preferences for display format configured in the user's OS settings, separates presentation format from wire format and is accessible out of the box by offering a familiar UI.

<ld-input placeholder="Birthday" type="date" value="2017-06-01"></ld-input>

<div class="ld-input">
  <input placeholder="Birthday" type="date" value="2017-06-01">
</div>

<LdInput placeholder="Birthday" type="date" value="2017-06-01" />

Type datetime-local #

The ld-input component of type="datetime-local" acts as a wrapper around the native input element oftype="datetime-local", fully relying on its built-in features and only enhancing it visually.
The component is lightweight, respects the user preferences for display format configured in the user's OS settings, separates presentation format from wire format and is accessible out of the box by offering a familiar UI.

<ld-input placeholder="Birthday" type="datetime-local" value="2017-06-01T19:30"></ld-input>

<div class="ld-input">
  <input placeholder="Birthday" type="datetime-local" value="2017-06-01T19:30">
</div>

<LdInput placeholder="Birthday" type="datetime-local" value="2017-06-01T19:30" />

Type email #

Triggerts associated keyboard in supporting browsers and devices with dynamic keyboards.

<ld-input placeholder="Your email address" type="email"></ld-input>

<div class="ld-input">
  <input placeholder="Your email address" type="email">
</div>

<LdInput placeholder="Your email address" type="email" />

Type file #

<ld-input placeholder="Your profile picture" type="file" accept="image/png, image/jpeg"></ld-input>

<LdInput placeholder="Your profile picture" type="file" accept="image/png, image/jpeg" />

Handling files #

If you are using the ld-input component within a form and are posting the form, there is no need to access the selected files and the underlying data, because they are submitted as part of the form data automatically.

However, if you want to compose the form data yourself or want to read the files on the client side, you can do so using the readonly files prop.

<ld-input
  placeholder="Your profile picture"
  type="file"
  accept="image/png, image/jpeg"
></ld-input>

<script>
  ;(() => {
    const ldInput = document.currentScript.previousElementSibling
    ldInput.addEventListener('ldchange', async (ev) => {
      const files = ev.target.files
      if (!files || !files.length) return

      // Read the file on the client side.
      const fileReader = new FileReader()
      fileReader.readAsDataURL(files[0])
      fileReader.onerror = (progressEvent) => {
        // Handle error...
      }
      fileReader.onloadend = (progressEvent) => {
        // Use file data...
      }

      // Or post the file to the server.
      const data = new FormData()
      data.append('userpic', files[0])
      const requestOptions = {
        method: 'POST',
        body: data,
      }
      try {
        await fetch('/api/user/profile/picture', {
          method: 'POST',
          body: data,
        })
        // success!
      } catch (err) {
        // Handle error...
      }
    })
  })()
</script>

<LdInput
  placeholder="Your profile picture"
  type="file"
  accept="image/png, image/jpeg"
  onLdchange={async (ev) => {
    const files = ev.target.files
    if (!files || !files.length) return

    // Read the file on the client side.
    const fileReader = new FileReader()
    fileReader.readAsDataURL(files[0])
    fileReader.onerror = (progressEvent) => {
      // Handle error...
    }
    fileReader.onloadend = (progressEvent) => {
      // Use file data...
    }

    // Or post the file to the server.
    const data = new FormData()
    data.append('userpic', files[0])
    const requestOptions = {
      method: 'POST',
      body: data,
    }
    try {
      await fetch('/api/user/profile/picture', requestOptions)
      // success!
    } catch (err) {
      // Handle error...
    }
  }}
/>

Type number #

<ld-input placeholder="Your age in years" type="number" min="0"></ld-input>

<div class="ld-input">
  <input placeholder="Your age in years" type="number" min="0">
</div>

<LdInput placeholder="Your age in years" type="number" min="0" />

Type password #

<ld-input placeholder="Password" type="password" min="0"></ld-input>

<div class="ld-input">
  <input placeholder="Password" type="password" min="0">
</div>

<LdInput placeholder="Password" type="password" min="0" />

Type search #

<ld-input placeholder="Search" type="search"></ld-input>

<div class="ld-input">
  <input placeholder="Search" type="search">
</div>

<LdInput placeholder="Search" type="search" />

Type tel #

Triggers a telephone keypad in some devices with dynamic keypads.

<ld-input placeholder="Your phone number" type="tel"></ld-input>

<div class="ld-input">
  <input placeholder="Your phone number" type="tel">
</div>

<LdInput placeholder="Your phone number" type="tel" />

Type time #

<ld-input placeholder="Time of reservation" type="time" value="13:30"></ld-input>

<div class="ld-input">
  <input placeholder="Time of reservation" type="time" value="13:30">
</div>

<LdInput placeholder="Time of reservation" type="time" value="13:30" />

Type url #

Triggerts associated keyboard in supporting browsers and devices with dynamic keyboards.

<ld-input placeholder="Your website URL" type="url"></ld-input>

<div class="ld-input">
  <input placeholder="Your website URL" type="url">
</div>

<LdInput placeholder="Your website URL" type="url" />

Multiline (as textarea) #

The multiline attribute transforms the component to a textarea element instead of an input element internally. Setting this attribute to true disables the attribute type and both slots.

<ld-input placeholder="Tell us your story..." multiline rows="5" cols="33"></ld-input>

<div class="ld-input">
  <textarea placeholder="Tell us your story..." rows="5" cols="33"></textarea>
</div>

<LdInput placeholder="Tell us your story..." multiline rows={5} cols={33} />

Resizing #

You can change the way how the multiline input element can be resized by the user by applying the resize prop on the ld-input element.

<ld-input resize="horizontal" placeholder="Tell us your story..." multiline rows="5" cols="33"></ld-input>

<ld-input resize="vertical" placeholder="Tell us your story..." multiline rows="5" cols="33"></ld-input>

<div class="ld-input ld-input--resize-horizontal">
  <textarea placeholder="Tell us your story..." rows="5" cols="33"></textarea>
</div>

<div class="ld-input ld-input--resize-vertical">
  <textarea placeholder="Tell us your story..." rows="5" cols="33"></textarea>
</div>

<LdInput resize="horizontal" placeholder="Tell us your story..." multiline rows={5} cols={33} />

<LdInput resize="vertical" placeholder="Tell us your story..." multiline rows={5} cols={33} />

Size #

<ld-input placeholder="Placeholder" size="sm"></ld-input>

<ld-input placeholder="Placeholder"></ld-input>

<ld-input placeholder="Placeholder" size="lg"></ld-input>

<div class="ld-input ld-input--sm">
  <input placeholder="Placeholder">
</div>

<div class="ld-input">
  <input placeholder="Placeholder">
</div>

<div class="ld-input ld-input--lg">
  <input placeholder="Placeholder">
</div>

<LdInput placeholder="Placeholder" size="sm" />

<LdInput placeholder="Placeholder" />

<LdInput placeholder="Placeholder" size="lg" />

With label #

<ld-label>
  Email Address
  <ld-input placeholder="jane.doe@example.com" type="email"></ld-input>
</ld-label>

<label class="ld-label">
  Email Address
  <div class="ld-input">
    <input placeholder="jane.doe@example.com" type="email">
  </div>
</label>

<LdLabel>
  Email Address
  <LdInput placeholder="jane.doe@example.com" type="email" />
</LdLabel>

Email Address

Please reffer to the ld-label docs for more information on the label component.

With label and input message #

<div style="display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); width: 100%">
  <ld-label>
    Email Address
    <ld-input invalid placeholder="jane.doe@example.com" value="yolo" type="email"></ld-input>
    <ld-input-message>The email address is invalid.</ld-input-message>
  </ld-label>

  <ld-label>
    Password
    <ld-input type="password" value="asdf1234"></ld-input>
    <ld-input-message mode="info">Use at least one special character (~!@#$%^&*_-+=|\(){}[]:;<>,.?/)</ld-input-message>
  </ld-label>
</div>

<div style="display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); width: 100%">
  <label class="ld-label">
    Email Address
    <div class="ld-input ld-input--invalid">
      <input placeholder="jane.doe@example.com" value="yolo" type="email">
    </div>
    <span class="ld-input-message ld-input-message--error">
      <svg class="ld-input-message__icon ld-icon ld-icon--sm" width="14" height="14" viewBox="0 0 14 14" fill="none">
        <path fill-rule="evenodd" clip-rule="evenodd" d="M7 14C10.866 14 14 10.866 14 7C14 3.13401 10.866 0 7 0C3.13401 0 0 3.13401 0 7C0 10.866 3.13401 14 7 14Z" fill="currentColor"/>
        <path d="M4.66675 4.66699L9.33341 9.33366" stroke="var(--ld-col-wht)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        <path d="M4.66675 9.33301L9.33341 4.66634" stroke="var(--ld-col-wht)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
      </svg>
      The email address is invalid.
    </span>
  </label>
  
  <label class="ld-label">
    Password
    <div class="ld-input">
      <input type="password" value="asdf1234">
    </div>
    <span class="ld-input-message">
      <svg class="ld-input-message__icon ld-icon ld-icon--sm" width="14" height="14" viewBox="0 0 14 14" fill="none">
        <path fill-rule="evenodd" clip-rule="evenodd" d="M7 14C10.866 14 14 10.866 14 7C14 3.13401 10.866 0 7 0C3.13401 0 0 3.13401 0 7C0 10.866 3.13401 14 7 14Z" fill="var(--ld-thm-warning)"/>
        <path fill-rule="evenodd" clip-rule="evenodd" d="M7.18234 11.0254C6.79228 11.0254 6.48657 10.9147 6.26518 10.6933C6.0438 10.472 5.93311 10.1662 5.93311 9.77618V6.12335C5.93311 5.99685 6.0069 5.93359 6.15449 5.93359H6.89771C7.28776 5.93359 7.59348 6.04428 7.81487 6.26567C8.03625 6.48705 8.14694 6.79277 8.14694 7.18283V10.8357C8.14694 10.9622 8.07315 11.0254 7.92556 11.0254H7.18234Z" fill="var(--ld-col-neutral-900)"/>
        <ellipse cx="6.99977" cy="3.80007" rx="1.06667" ry="1.06667" fill="var(--ld-col-neutral-900)"/>
      </svg>
      Use at least one special character (~!@#$%^&*_-+=|\(){}[]:;<>,.?/)
    </span>
  </label>
</div>

<div style={ {
  display: 'grid',
  gap: '1rem',
  gridTemplateColumns: 'repeat(auto-fit, minmax(12rem, 1fr))',
  width: '100%',
} }>
  <LdLabel>
    Email Address
    <LdInput invalid placeholder="jane.doe@example.com" value="yolo" type="email" />
    <LdInputMessage>The email address is invalid.</LdInputMessage>
  </LdLabel>

  <LdLabel>
    Password
    <LdInput type="password" value="asdf1234" />
    <LdInputMessage mode="info">Use at least one special character (~!@#$%^&*_-+=|()&#123;&#125;[]:;&lt;&gt;,.?/)</LdInputMessage>
  </LdLabel>
</div>

Email Address

The email address is invalid.

Password

Use at least one special character (~!@#$%^&*_-+=|\(){}[]:;<>,.?/)

Email Address

The email address is invalid. Password

Use at least one special character (~!@#$%^&*_-+=|\(){}[]:;<>,.?/)

On input message width and placement #

By default, the input field stretches to the maximum width of its wrapping label, which in turn stretches to the width of its content (the computed width of the ld-input-message component). So, if you want to set certain constraints on the width of all three components, you can do so by setting the constraint on the wrapping element – the ld-label component.

<ld-label>
  Email Address
  <ld-input placeholder="jane.doe@example.com" type="email"></ld-input>
  <ld-input-message mode="info">This info message is extremely long and makes all three components (the label, the input and itself) grow horizontaly.</ld-input-message>
</ld-label>

<ld-label style="max-width: 20rem">
  Email Address
  <ld-input placeholder="jane.doe@example.com" type="email"></ld-input>
  <ld-input-message mode="info">This info message is also extremely long, but since the label has a max width, all three components (the label, the input and itself) can take only the maximum width of the label.</ld-input-message>
</ld-label>

<label class="ld-label">
  Email Address
  <div class="ld-input">
    <input placeholder="jane.doe@example.com" type="email">
  </div>
  <span class="ld-input-message">
      <svg class="ld-input-message__icon ld-icon ld-icon--sm" width="14" height="14" viewBox="0 0 14 14" fill="none">
        <path fill-rule="evenodd" clip-rule="evenodd" d="M7 14C10.866 14 14 10.866 14 7C14 3.13401 10.866 0 7 0C3.13401 0 0 3.13401 0 7C0 10.866 3.13401 14 7 14Z" fill="var(--ld-thm-warning)"/>
        <path fill-rule="evenodd" clip-rule="evenodd" d="M7.18234 11.0254C6.79228 11.0254 6.48657 10.9147 6.26518 10.6933C6.0438 10.472 5.93311 10.1662 5.93311 9.77618V6.12335C5.93311 5.99685 6.0069 5.93359 6.15449 5.93359H6.89771C7.28776 5.93359 7.59348 6.04428 7.81487 6.26567C8.03625 6.48705 8.14694 6.79277 8.14694 7.18283V10.8357C8.14694 10.9622 8.07315 11.0254 7.92556 11.0254H7.18234Z" fill="var(--ld-col-neutral-900)"/>
        <ellipse cx="6.99977" cy="3.80007" rx="1.06667" ry="1.06667" fill="var(--ld-col-neutral-900)"/>
      </svg>
    This info message is extremely long and makes all three components (the label, the input and itself) grow horizontaly.
  </span>
</label>

<label class="ld-label" style="max-width: 20rem">
  Email Address
  <div class="ld-input">
    <input placeholder="jane.doe@example.com" type="email">
  </div>
  <span class="ld-input-message">
    <svg class="ld-input-message__icon ld-icon ld-icon--sm" width="14" height="14" viewBox="0 0 14 14" fill="none">
      <path fill-rule="evenodd" clip-rule="evenodd" d="M7 14C10.866 14 14 10.866 14 7C14 3.13401 10.866 0 7 0C3.13401 0 0 3.13401 0 7C0 10.866 3.13401 14 7 14Z" fill="var(--ld-thm-warning)"/>
      <path fill-rule="evenodd" clip-rule="evenodd" d="M7.18234 11.0254C6.79228 11.0254 6.48657 10.9147 6.26518 10.6933C6.0438 10.472 5.93311 10.1662 5.93311 9.77618V6.12335C5.93311 5.99685 6.0069 5.93359 6.15449 5.93359H6.89771C7.28776 5.93359 7.59348 6.04428 7.81487 6.26567C8.03625 6.48705 8.14694 6.79277 8.14694 7.18283V10.8357C8.14694 10.9622 8.07315 11.0254 7.92556 11.0254H7.18234Z" fill="var(--ld-col-neutral-900)"/>
      <ellipse cx="6.99977" cy="3.80007" rx="1.06667" ry="1.06667" fill="var(--ld-col-neutral-900)"/>
    </svg>
    This info message is also extremely long, but since the label has a max width, all three components (the label, the input and itself) can take only the maximum width of the label.
  </span>
</label>

<LdLabel>
  Email Address
  <LdInput placeholder="jane.doe@example.com" type="email" />
  <LdInputMessage mode="info">This info message is extremely long and makes all three components (the label, the input and itself) grow horizontaly.</LdInputMessage>
</LdLabel>

<LdLabel style={ { maxWidth: '20rem' } }>
  Email Address
  <LdInput placeholder="jane.doe@example.com" type="email" />
  <LdInputMessage mode="info">This info message is also extremely long, but since the label has a max width, all three components (the label, the input and itself) can take only the maximum width of the label.</LdInputMessage>
</LdLabel>

Email Address

This info message is extremely long and makes all three components (the label, the input and itself) grow horizontaly.

Email Address

This info message is also extremely long, but since the label has a max width, all three components (the label, the input and itself) can take only the maximum width of the label.

Email Address

This info message is extremely long and makes all three components (the label, the input and itself) grow horizontaly. Email Address

This info message is also extremely long, but since the label has a max width, all three components (the label, the input and itself) can take only the maximum width of the label.

When displaying input messages conditionally (i.e. an error message becomes visible as soon as an input has been interacted with, but the value is still invalid) you should try to position UI elements in a way that prevents layout shifts. For instance, you can "reserve space" for your messages and then make them appear in the reserved space without pushing other content to the bottom (i.e. using position: absolute or some “flexy” layout). Needless to say, results look best if you keep the messages short.

With slotted elements #

You can use slots in order to add static or interactive elements, such as icons or buttons into the input component.

With icon #

<ld-input placeholder="Placeholder">
  <ld-icon name="placeholder" slot="end"></ld-icon>
</ld-input>

<ld-input placeholder="Placeholder">
  <ld-icon name="placeholder" slot="start"></ld-icon>
</ld-input>

<ld-input placeholder="Placeholder">
  <ld-icon name="placeholder" slot="start"></ld-icon>
  <ld-icon name="placeholder" slot="end"></ld-icon>
</ld-input>

<div class="ld-input">
  <input placeholder="Placeholder">
  <span class="ld-icon">
    <svg viewBox="0 0 24 24" fill="none">
      <title>Text</title>
      <rect x="1.5" y="1.5" width="21" height="21" rx="4.5" stroke="currentColor" stroke-width="3"/>
      <circle cx="12" cy="12" r="4.5" stroke="currentColor" stroke-width="3"/>
    </svg>
  </span>
</div>

<div class="ld-input">
  <span class="ld-icon">
    <svg viewBox="0 0 24 24" fill="none">
      <title>Text</title>
      <rect x="1.5" y="1.5" width="21" height="21" rx="4.5" stroke="currentColor" stroke-width="3"/>
      <circle cx="12" cy="12" r="4.5" stroke="currentColor" stroke-width="3"/>
    </svg>
  </span>
  <input placeholder="Placeholder">
</div>

<div class="ld-input">
  <span class="ld-icon">
    <svg viewBox="0 0 24 24" fill="none">
      <title>Text</title>
      <rect x="1.5" y="1.5" width="21" height="21" rx="4.5" stroke="currentColor" stroke-width="3"/>
      <circle cx="12" cy="12" r="4.5" stroke="currentColor" stroke-width="3"/>
    </svg>
  </span>
  <input placeholder="Placeholder">
  <span class="ld-icon">
    <svg viewBox="0 0 24 24" fill="none">
      <title>Text</title>
      <rect x="1.5" y="1.5" width="21" height="21" rx="4.5" stroke="currentColor" stroke-width="3"/>
      <circle cx="12" cy="12" r="4.5" stroke="currentColor" stroke-width="3"/>
    </svg>
  </span>
</div>

<LdInput placeholder="Placeholder">
  <LdIcon name="placeholder" slot="end" />
</LdInput>

<LdInput placeholder="Placeholder">
  <LdIcon name="placeholder" slot="start" />
</LdInput>

<LdInput placeholder="Placeholder">
  <LdIcon name="placeholder" slot="start" />
  <LdIcon name="placeholder" slot="end" />
</LdInput>

The Web Component ld-input listens for click events on the contained ld-icon component and automatically focuses the input field on icon click. The CSS component version of ld-input doesn't do that.

With button #

<ld-input placeholder="Placeholder">
  <ld-button slot="end" aria-label="Submit">
    <ld-icon name="placeholder"></ld-icon>
  </ld-button>
</ld-input>

<ld-input placeholder="Placeholder">
  <ld-button slot="end">
    Submit <ld-icon name="placeholder"></ld-icon>
  </ld-button>
</ld-input>

<div class="ld-input">
  <input placeholder="Placeholder">
  <button class="ld-button" aria-label="Submit">
    <span class="ld-icon">
      <svg viewBox="0 0 24 24" fill="none">
        <rect x="1.5" y="1.5" width="21" height="21" rx="4.5" stroke="currentColor" stroke-width="3"/>
        <circle cx="12" cy="12" r="4.5" stroke="currentColor" stroke-width="3"/>
      </svg>
    </span>
  </button>
</div>

<div class="ld-input">
  <input placeholder="Placeholder">
  <button class="ld-button">
    Submit
    <span class="ld-icon">
      <svg viewBox="0 0 24 24" fill="none">
        <rect x="1.5" y="1.5" width="21" height="21" rx="4.5" stroke="currentColor" stroke-width="3"/>
        <circle cx="12" cy="12" r="4.5" stroke="currentColor" stroke-width="3"/>
      </svg>
    </span>
  </button>
</div>

<LdInput placeholder="Placeholder">
  <LdButton slot="end" aria-label="Submit">
    <LdIcon name="placeholder" />
  </LdButton>
</LdInput>

<LdInput placeholder="Placeholder">
  <LdButton slot="end">
    Submit <LdIcon name="placeholder" />
  </LdButton>
</LdInput>

Submit

With ghost button #

<ld-input placeholder="Placeholder">
  <ld-button mode="ghost" slot="end" aria-label="Submit">
    <ld-icon name="placeholder"></ld-icon>
  </ld-button>
</ld-input>

<ld-input placeholder="Placeholder">
  <ld-button mode="ghost" slot="start" aria-label="Submit">
    <ld-icon name="placeholder"></ld-icon>
  </ld-button>
</ld-input>

<ld-input placeholder="Placeholder">
  <ld-button mode="ghost" slot="start" aria-label="Submit">
    <ld-icon name="placeholder"></ld-icon>
  </ld-button>
  <ld-button mode="ghost" slot="end" aria-label="Submit">
    <ld-icon name="placeholder"></ld-icon>
  </ld-button>
</ld-input>

<div class="ld-input">
  <input placeholder="Placeholder">
  <button class="ld-button ld-button--ghost" aria-label="Submit">
    <span class="ld-icon">
      <svg viewBox="0 0 24 24" fill="none">
        <rect x="1.5" y="1.5" width="21" height="21" rx="4.5" stroke="currentColor" stroke-width="3"/>
        <circle cx="12" cy="12" r="4.5" stroke="currentColor" stroke-width="3"/>
      </svg>
    </span>
  </button>
</div>

<div class="ld-input">
  <button class="ld-button ld-button--ghost" aria-label="Submit">
    <span class="ld-icon">
      <svg viewBox="0 0 24 24" fill="none">
        <rect x="1.5" y="1.5" width="21" height="21" rx="4.5" stroke="currentColor" stroke-width="3"/>
        <circle cx="12" cy="12" r="4.5" stroke="currentColor" stroke-width="3"/>
      </svg>
    </span>
  </button>
  <input placeholder="Placeholder">
</div>

<div class="ld-input">
  <button class="ld-button ld-button--ghost" aria-label="Submit">
    <span class="ld-icon">
      <svg viewBox="0 0 24 24" fill="none">
        <rect x="1.5" y="1.5" width="21" height="21" rx="4.5" stroke="currentColor" stroke-width="3"/>
        <circle cx="12" cy="12" r="4.5" stroke="currentColor" stroke-width="3"/>
      </svg>
    </span>
  </button>
  <input placeholder="Placeholder">
  <button class="ld-button ld-button--ghost" aria-label="Submit">
    <span class="ld-icon">
      <svg viewBox="0 0 24 24" fill="none">
        <rect x="1.5" y="1.5" width="21" height="21" rx="4.5" stroke="currentColor" stroke-width="3"/>
        <circle cx="12" cy="12" r="4.5" stroke="currentColor" stroke-width="3"/>
      </svg>
    </span>
  </button>
</div>

<LdInput placeholder="Placeholder">
  <LdButton mode="ghost" slot="end" aria-label="Submit">
    <LdIcon name="placeholder" />
  </LdButton>
</LdInput>

<LdInput placeholder="Placeholder">
  <LdButton mode="ghost" slot="start" aria-label="Submit">
    <LdIcon name="placeholder" />
  </LdButton>
</LdInput>

<LdInput placeholder="Placeholder">
  <LdButton mode="ghost" slot="start" aria-label="Submit">
    <LdIcon name="placeholder" />
  </LdButton>
  <LdButton mode="ghost" slot="end" aria-label="Submit">
    <LdIcon name="placeholder" />
  </LdButton>
</LdInput>

With custom component #

<ld-input placeholder="Placeholder">
  <span slot="end">🤓</span>
</ld-input>

<div class="ld-input">
  <input placeholder="Placeholder">
  <span>🤓</span>
</div>

<LdInput placeholder="Placeholder">
  <span slot="end">🤓</span>
</LdInput>

🤓

Input validation #

The ld-input Web Component does not provide any properties or methods for validating the input value internally. Instead, it provides a low level API for integrating the component with the form validation solution of your choice. It allows you to listen for focus, input and blur events, as well as custom events (see Events for details).

You can find examples for different kinds of input validation in the Form validation documentation. Please also be aware of differences in event handling compared to native elements that come with Web Components. Details can be found in our Event handling documentation.

Overview #

The ld-input component. You can use it in conjunction with the ld-label and the ld-input-message component. See examples in the docs for a better understanding on how they can be used together.

Properties #

Property	Attribute	Description	Type	Default
`accept`	`accept`	Hint for expected file type in file upload controls.	`string`	`undefined`
`ariaDisabled`	`aria-disabled`	Alternative disabled state that keeps element focusable	`string`	`undefined`
`autocomplete`	`autocomplete`	Hint for form autofill feature.	`string`	`undefined`
`autofocus`	`autofocus`	Automatically focus the form control when the page is loaded.	`boolean`	`undefined`
`capture`	`capture`	Media capture input method in file upload controls.	`string`	`undefined`
`cols`	`cols`	The number of columns.	`number`	`undefined`
`dirname`	`dirname`	Name of form field to use for sending the element's directionality in form submission.	`string`	`undefined`
`disabled`	`disabled`	Whether the form control is disabled.	`boolean`	`undefined`
`files`	`files`	Selected files for ld-input with type file (readonly).	`FileList \| undefined`	`undefined`
`form`	`form`	Associates the control with a form element.	`string`	`undefined`
`invalid`	`invalid`	Set this property to `true` in order to mark the field visually as invalid.	`boolean`	`undefined`
`key`	`key`	for tracking the node's identity when working with lists	`string \| number`	`undefined`
`ldTabindex`	`ld-tabindex`	Tab index of the input.	`number`	`undefined`
`list`	`list`	Value of the id attribute of the `<datalist>` of autocomplete options.	`string`	`undefined`
`max`	`max`	Maximum value.	`number \| string`	`undefined`
`maxlength`	`maxlength`	Maximum length (number of characters) of `value`.	`number \| string`	`undefined`
`min`	`min`	Minimum value.	`number \| string`	`undefined`
`minlength`	`minlength`	Minimum length (number of characters) of `value`.	`number \| string`	`undefined`
`multiline`	`multiline`	Uses textarea instead of input internally. Setting this attribute to true disables the attribute type and both slots.	`boolean`	`undefined`
`multiple`	`multiple`	Boolean. Whether to allow multiple values.	`boolean`	`undefined`
`name`	`name`	Used to specify the name of the control.	`string`	`undefined`
`pattern`	`pattern`	Pattern the `value` must match to be valid.	`string`	`undefined`
`placeholder`	`placeholder`	The input placeholder.	`string`	`undefined`
`readonly`	`readonly`	The value is not editable.	`boolean`	`undefined`
`ref`	`ref`	reference to component	`any`	`undefined`
`required`	`required`	A value is required for the form to be submittable.	`boolean`	`undefined`
`resize`	`resize`	Whether the multiline input is resizable, and if so, in which directions.	`"both" \| "horizontal" \| "none" \| "vertical"`	`'both'`
`rows`	`rows`	The number of rows.	`number`	`undefined`
`size`	`size`	Size of the input.	`"lg" \| "sm"`	`undefined`
`step`	`step`	Incremental values that are valid.	`string`	`undefined`
`tone`	`tone`	Input tone. Use `'dark'` on white backgrounds. Default is a light tone.	`"dark"`	`undefined`
`type`	`type`	The input type.	`string`	`undefined`
`value`	`value`	The input value.	`string`	`undefined`

Events #

Event	Description	Type
`ldchange`	Emitted when the input value changed and the element loses focus.	`CustomEvent<string>`
`ldinput`	Emitted when the input value changed.	`CustomEvent<string>`

Methods #

`focusInner() => Promise<void>` #

Sets focus on the input

Returns #

Type: Promise<void>

Slots #

Slot	Description
`"end"`	The purpose of this slot is to add icons or buttons to the input, justifying the item to the start of the component. Styling for `ld-icon` and `ld-button` is provided within the `ld-input` component. If you choose to place something different into the slot, you will probably need to adjust some styles on the slotted item in order to make it fit right.
`"start"`	The purpose of this slot is to add icons or buttons to the input, justifying the item to the end of the component. Styling for `ld-icon` and `ld-button` is provided within the `ld-input` component. If you choose to place something different into the slot, you will probably need to adjust some styles on the slotted item in order to make it fit right.

Shadow Parts #

Part	Description
`"input"`	Actual input/textarea element
`"placeholder"`	Placeholder rendered for input type "file"

Built with StencilJS

ld-input #

Examples #

Default #

With value #

Disabled #

Dark #

Invalid #

Type date #

Type datetime-local #

Type email #

Type file #

Handling files #

Type number #

Type password #

Type search #

Type tel #

Type time #

Type url #

Multiline (as textarea) #

Resizing #

Size #

With label #

With label and input message #

On input message width and placement #

With slotted elements #

With icon #

With button #

With ghost button #

With custom component #

Input validation #

Overview #

Properties #

Events #

Methods #

focusInner() => Promise<void> #

Returns #

Slots #

Shadow Parts #

`focusInner() => Promise<void>` #