Input

<gstock-input> | GstockInput

Tamaño

Utilice el atributo de size para cambiar el tamaño del componente.

<gstock-input placeholder="Small" size="small"></gstock-input>
<gstock-input placeholder="Medium" size="medium"></gstock-input>
<gstock-input placeholder="Large" size="large"></gstock-input>

Marcador de posición

Utilice el atributo placeholder para agregar un marcador de posición. 

<gstock-input placeholder="This is a placeholder..."></gstock-input>

Deshabilitado

Utilice el atributo disabled para deshabilitar el componente.

<gstock-input disabled value="This input is disabled"></gstock-input>

Solo lectura

Utilice el atributo readonly para permitir leer el valor y no modificarlo. 

<gstock-input readonly="readonly" value="This value is read only"></gstock-input>

Label and help text

Use the label and help-text attribute to give the input more accessible. 

<gstock-input label="Label:" help-text="This is a test help-text."></gstock-input>

For custom labels and help texts with HTML, use the label and help-text slots.

Custom help-text with a link. 
<gstock-input>
  <label slot="label" style="display: inline-flex; gap: 4px">
    <gstock-icon name="edit" size="small"></gstock-icon> Custom label:
  </label>
  <span slot="help-text"> Custom help-text with a <a href="#label-and-help-text">link</a>. </span>
</gstock-input>

Clearable

Use the clearable attribute to add a clear button when the input has content. 

<gstock-input clearable value="Press clear button"></gstock-input>

Prefix and suffix

Use the prefix and suffix attributes to add icons.

<gstock-input placeholder="Medium" size="medium" prefix="user" suffix="star"></gstock-input>

For custom prefixes and suffixes with HTML, use the prefix and suffix slots. 

<gstock-input placeholder="Medium" size="medium">
  <gstock-icon-button
    icon="user"
    slot="prefix"
    onclick="alert('clicked prefix!')"></gstock-icon-button>
  <gstock-icon-button
    icon="star"
    slot="suffix"
    onclick="alert('clicked suffix!')"></gstock-icon-button>
</gstock-input>

Input Types

The type attribute controls the type of input the browser renders.



<gstock-input type="email" placeholder="Email"></gstock-input>
<br />
<gstock-input type="number" placeholder="Number"></gstock-input>
<br />
<gstock-input type="date" placeholder="Date"></gstock-input>

Password Toggle

Use the password-toggle attribute to add a button when the input is password type. 

<gstock-input password-toggle type="password" size="medium"></gstock-input>

Control de formulario

Campo obligatorio

Utilice el atributo required para que el valor del componente sea obligatorio.


Submit Reset 
<form class="input-validation-required">
  <gstock-input
    label="Required field:"
    name="test"
    help-text="The form will not be submitted if a required field is incomplete." required></gstock-input>
  <br />
  <gstock-button size="small" type="submit">Submit</gstock-button>
  <gstock-button size="small" variant="outlined"  type="reset">Reset</gstock-button>
</form>

<script type="module">
  const form = document.querySelector('.input-validation-required');

  // Wait for controls to be defined before attaching form listeners
  await Promise.all([
    customElements.whenDefined('gstock-button'),
    customElements.whenDefined('gstock-input')
  ]).then(() => {
    form.addEventListener('submit', event => {
      event.preventDefault();
      const formData = JSON.stringify(Object.fromEntries(new FormData(form)));
      alert(`The field is valid!\n\n${formData}`);
    });
  });
</script>

Pattern

Use the pattern attribute to restrict a value to a specific pattern.


Submit Reset 
<form class="input-validation-pattern">
  <gstock-input
    name="test"
    label="Only letters are allowed:"
    pattern="[A-Za-z]+"
    required
    help-text="This example only
    allows the letters A-Z, so the form will not submit if a number or symbol is entered."></gstock-input>
  <br />
  <gstock-button size="small" type="submit">Submit</gstock-button>
  <gstock-button size="small" variant="outlined"  type="reset">Reset</gstock-button>
</form>

<script type="module">
  const form = document.querySelector('.input-validation-pattern');

  // Wait for controls to be defined before attaching form listeners
  await Promise.all([
    customElements.whenDefined('gstock-button'),
    customElements.whenDefined('gstock-input')
  ]).then(() => {
    form.addEventListener('submit', event => {
      event.preventDefault();
      const formData = JSON.stringify(Object.fromEntries(new FormData(form)));
      alert(`The field is valid!\n\n${formData}`);
    });
  });
</script>

Semantic input types

Some input types will automatically trigger constraints, such as email and url.



Submit Reset 
<form class="input-validation-type">
  <gstock-input
    name="email"
    type="email"
    label="Email:"
    placeholder="username@example.com"
    required></gstock-input>
  <br />
  <gstock-input
    name="url"
    type="url"
    label="URL:"
    placeholder="https://example.com/"
    required></gstock-input>
  <br />
  <gstock-button size="small" type="submit">Submit</gstock-button>
  <gstock-button size="small" variant="outlined"  type="reset">Reset</gstock-button>
</form>

<script type="module">
  const form = document.querySelector('.input-validation-type');

  // Wait for controls to be defined before attaching form listeners
  await Promise.all([
    customElements.whenDefined('gstock-button'),
    customElements.whenDefined('gstock-input')
  ]).then(() => {
    form.addEventListener('submit', event => {
      event.preventDefault();
      const formData = JSON.stringify(Object.fromEntries(new FormData(form)));
      alert(`The field is valid!\n\n${formData}`);
    });
  });
</script>

Custom error messages

To create a custom validation error, pass a non-empty string to the setCustomValidity() method. This will override any existing validation constraints. To make the input valid again, call setCustomValidity() again with an empty string.


Submit Reset 
<form class="input-validation-custom">
  <gstock-input
    name="name"
    label="Type `gstock` to make the input valid:"
    required
    help-text="The form will not be submitted when a custom validity is set and the browser will show a
    validation error when the containing form is submitted."></gstock-input>
  <br />
  <gstock-button size="small" type="submit">Submit</gstock-button>
  <gstock-button size="small" variant="outlined"  type="reset">Reset</gstock-button>
</form>

<script type="module">
  const form = document.querySelector('.input-validation-custom');
  const input = form.querySelector('gstock-input');

  // Wait for controls to be defined before attaching form listeners
  await Promise.all([
    customElements.whenDefined('gstock-button'),
    customElements.whenDefined('gstock-input')
  ]).then(() => {
    form.addEventListener('submit', event => {
      event.preventDefault();
      const formData = JSON.stringify(Object.fromEntries(new FormData(form)));
      alert(`The field is valid!\n\n${formData}`);
    });

    input.addEventListener('gstock-input-event', () => {
      if (input.value === 'gstock') {
        input.setCustomValidity('');
      } else {
        input.setCustomValidity("You must type 'gstock' before sending!");
      }
    });
  });
</script>

Styling validation

Use the validity-styles attribute to apply validation styles. These styles are applied only after a user interaction, such as typing or submitting.


Submit Reset 
<form class="validity-styles">
  <gstock-input
    name="name"
    label="Name:"
    help-text="This field is required."
    autocomplete="off"
    required
    validity-styles></gstock-input>
  <br />
  <gstock-button size="small" type="submit">Submit</gstock-button>
  <gstock-button size="small" variant="outlined"  type="reset">Reset</gstock-button>
</form>

<script type="module">
  const form = document.querySelector('.validity-styles');

  // Wait for controls to be defined before attaching form listeners
  await Promise.all([
    customElements.whenDefined('gstock-button'),
    customElements.whenDefined('gstock-input')
  ]).then(() => {
    form.addEventListener('submit', event => {
      event.preventDefault();
      const formData = JSON.stringify(Object.fromEntries(new FormData(form)));
      alert(`The field is valid!\n\n${formData}`);
    });
  });
</script>

Inline validation

To disable the browsers error messages, you need to cancel the gstock-invalid-event event. Then you can apply your own inline validation errors.



Submit Reset 
<form class="inline-validation">
  <gstock-input
    name="name"
    label="Name:"
    help-text="This field is required."
    autocomplete="off"
    required
    validity-styles></gstock-input>
  <br />
  <div id="error-message" aria-live="polite" hidden></div>
  <br />
  <gstock-button size="small" type="submit">Submit</gstock-button>
  <gstock-button size="small" variant="outlined"  type="reset">Reset</gstock-button>
</form>

<script type="module">
  const form = document.querySelector('.inline-validation');
  const errorMessage = document.querySelector('#error-message');

  // Wait for controls to be defined before attaching form listeners
  await Promise.all([
    customElements.whenDefined('gstock-button'),
    customElements.whenDefined('gstock-input')
  ]).then(() => {
    form.addEventListener(
      'gstock-invalid-event',
      event => {
        event.preventDefault();
        errorMessage.textContent = `Error: ${event.target.validationMessage}`;
        errorMessage.hidden = false;
        event.target.focus();
      },
      { capture: true },
    );

    form.addEventListener('submit', event => {
      event.preventDefault();
      errorMessage.hidden = true;
      errorMessage.textContent = '';

      setTimeout(() => {
        const formData = JSON.stringify(Object.fromEntries(new FormData(form)));
        alert(`The field is valid!\n\n${formData}`);
      }, 50);
    });

    form.addEventListener('reset', () => {
      errorMessage.hidden = true;
      errorMessage.textContent = '';
    });
  });
</script>