How to use the bpk-component-input.INPUT_TYPES.tel function in bpk-component-input

To help you get started, we’ve selected a few bpk-component-input examples, based on popular ways it is used in public projects.

github Skyscanner / backpack / packages / bpk-docs / src / pages / FormsPage / FormsPage.js View on Github external
<BpkLabel htmlFor="input_password">Password input</BpkLabel>
        <InputContainer
          FormComponent={BpkInput}
          type={INPUT_TYPES.password}
          id="input_password"
          name="input_password"
          value="letmein"
          placeholder="Password"
          onChange={() => null}
        />
      </form>,
      <form className={formClassName}>
        <BpkLabel htmlFor="input_telephone">Telephone input</BpkLabel>
        <InputContainer
          FormComponent={BpkInput}
          type={INPUT_TYPES.tel}
          id="input_telephone"
          name="input_telephone"
          value="+441234567890"
          placeholder="Phone number"
          onChange={() => null}
        />
      </form>,
    ],
    readme: inputReadme,
  },
  {
    id: 'selects',
    title: 'Selects (aka dropdowns)',
    blurb: [
      <BpkParagraph>
        Backpack selects override the default styles in most modern browsers. In
github Skyscanner / backpack / packages / bpk-component-phone-input / src / BpkPhoneInput.js View on Github external
))}
      </BpkSelect>
      <BpkLabel
        htmlFor={id}
        className={getClassName('bpk-phone-input__phone-number-label')}
        disabled={disabled}
      >
        {label}
      </BpkLabel>
      <BpkInput
        {...commonProps}
        {...rest}
        id={id}
        name={name}
        value={displayValue}
        type={INPUT_TYPES.tel}
        onChange={handleChange}
        className={getClassName('bpk-phone-input__phone-number', className)}
      />
    </span>
  );
};