PlayfulInputPhone

Renders a primitive form input component with a custom dropdown for country selection. The component uses react-phone-input-2 because it is well tested and includes flags and features we require.

When used with the medium scale, the input is wrapped with a label as well.

<Spacings.Stack>
  <FormLabel>Name</FormLabel>
  <PlayfulInputPhone
    id={id}
    inputClass={id}
    value={value}
    name={name}
    valid={valid}
  />
</Spacings.Stack>

With medium scale

This scale is used with our alternate page layout that shows only a single question in the form of a large heading. For this reason, this component renders a label as a descriptor for the field.

<PlayfulInputPhone
  id={id}
  inputClass={id}
  label="Name"
  scale="medium"
  value={value}
  name={name}
  valid={valid}
/>

Disabled state

<Spacings.Stack>
  <FormLabel>Name</FormLabel>
  <PlayfulInputPhone
    id={id}
    inputClass={id}
    value={value}
    name={name}
    disabled={disabled}
  />
</Spacings.Stack>

Error state

<Spacings.Stack>
  <FormLabel>Name</FormLabel>
  <PlayfulInputPhone
    id={id}
    inputClass={id}
    value={value}
    name={name}
    valid={valid}
    invalid={invalid}
  />
</Spacings.Stack>

Error state with medium scale

<PlayfulInputPhone
  id={id}
  inputClass={id}
  label="Name"
  scale="medium"
  value={value}
  name={name}
  valid={valid}
  invalid={invalid}
/>

Props