Input

Input is used in place of a traditional `input` element. This has formik baked into it for ease of use.

Examples

Variant - Default

<Formik initialValues={{defaultInput: ""}} onSubmit={()=>{}}>
      <Input name="defaultInput" placeholder="Enter first name" label="First name" />
    </Formik>

Variant - Large

<Formik initialValues={{largeInput: ""}} onSubmit={()=>{}}>
          <Input variant="large" name="largeInput" placeholder="First name" icon="calendar" />
    </Formik>

Number Input

<Formik initialValues={{textInput: "", textInput2: ""}} onSubmit={()=>{}}>
      <Input name="textInput" placeholder="Enter number of cakes" type="number" label="How many cakes did you eat?" />
    </Formik>

Currency Input

<Formik initialValues={{currencyDefault: "", currencyLarge: ""}} onSubmit={()=>{}}>
      <Flex gap={3} flexDirection="column">
        <Input name="currencyDefault" currency="GBP" placeholder="0" label="How much would pay for this activity?"/>
        <Input name="currencyLarge" currency="GBP" placeholder="0" variant="large" icon="currency" />
      </Flex>
    </Formik>

Input with Error state

<Formik initialValues={{defaultInput: "", largeInput: ""}} onSubmit={()=>{}} validationSchema={inputValidationSchema}>
      <Flex gap={3} flexDirection="column" width={1}>
        <Input name="defaultInput" placeholder="Enter name" label="Type less than 5 letters to see error state" />
        <Input name="largeInput" placeholder="Type less than 5 letters to see error state" variant="large" icon="mag-glass" />
      </Flex>
    </Formik>

Input with readonly

<Formik initialValues={{textInput: "John Doe"}} onSubmit={()=>{}}>
      <Input name="textInput" label="First name" readOnly />
    </Formik>

Input with places

<Formik initialValues={{textInputWithPlaces: ""}} onSubmit={()=>{}}><InputPlaces
      name="textInputWithPlaces"
      placeholder="Where are you going?"
      handleSelect={() => {}}
    />
      </Formik>

Input Telephone

<Formik initialValues={{telephone: ""}} onSubmit={()=>{}} validationSchema={inputTelephoneValidationSchema}>
  <InputTelephone name="telephone" label="Telephone number" country="GB" placeholder="Enter telephone here" />
</Formik>