Telephone Input

Guidance on how to construct a telephone input out of existing atoms, and the useTelephoneCountryCodes hook from the @krakentech/utils package.

Code

import { Grid, Autocomplete, TextField } from '@krakentech/coral';
import { useTelephoneCountryCodes } from '@krakentech/utils';

export const YourTelephoneInputComponent = () => {
  const [code, setCode] = useState('');
  const [telephoneNumber, setTelephoneNumber] = useState('');
  const { telephoneCountryCodes } = useTelephoneCountryCodes({});

  return (
      <Grid templateColumns="repeat(12, 1fr)" gap="md">
          <GridItem colSpan={4}>
              <Autocomplete
                  label="Country code"
                  name="country_code"
                  options={telephoneCountryCodes.map((country) => ({
                      label: country,
                      value: country,
                  }))}
                  value={code}
                  onChange={(value) => setCode(value ?? '')}
              />
          </GridItem>
          <GridItem colSpan={8}>
              <TextField
                  label="Telephone number"
                  name="telephone_number"
                  value={telephoneNumber}
                  onChange={(e) => setTelephoneNumber(e.target.value)}
              />
          </GridItem>
      </Grid>
  );

};

Interactive Example