Field Holder

Component used for wrapping field elements seen in the config view for activities and rentals. It is used to apply consistent styling and spacing for elements in the page

Examples

FieldHolder Number Input

<Formik initialValues={{textInput: ""}} onSubmit={()=>{}}>
  <FieldHolder>
    <FieldTitle required>How many people are going?</FieldTitle>
    <Input name='textInput' placeholder="enter if you dare" type="number"/>
  </FieldHolder>
</Formik>

FieldHolder Disabled

<FieldHolder disabled={true}>
  <FieldTitle disabled={true}>A very disabled Fieldholder</FieldTitle>
  <Text color="tertiary">If only someone would come along and enable me...</Text>
</FieldHolder>

Field Holder With Quantity Row

<Formik initialValues={{TestItem: 0}} onSubmit={() => {}}>
  {({ values }) => (
    <Form>
     <div style={{ width: '350px' }}>
      <FieldHolder hasValues={values.TestItem > 0}>
        <H6 mb={1}>Test item to add</H6>
        <Price
          pence={1000}
          currency="gbp"
          color="tertiary"
        />
        <FieldHolderQuantityRow>
          <Text fontStyle="p3">Quantity:</Text>
          <Quantity
            name="TestItem"
            min={0}
            max={50}
          />
        </FieldHolderQuantityRow>
        </FieldHolder>
      </div>  
    </Form>  
  )}
</Formik>