Forms

<Form on:send={resetPassword}> //on:send function that will catch send form event
  <div class="form">
    <TextInput
       name="email"
       icon="fa-circle-user"
       label="Email"
       validation="email"
       invalidText="Please enter your email."
     />
  </div>
  <div class="between-btn-box">
    <Button
       style="primary"
       type="submit"
    >Reset password</Button>
    <div>
      Already have a GoBasic account?
    </div>
  </div>
 
  ... rest of the code inside form
 
</Form>

<TextInput
  name="input" //input name for form send
  bind:value={someVariable} //to bind input value to variable
  icon='fa-eye-slash'; //Fontawesome icon name
  label='label text';
  validation=''; // required, email (validation options whole list in formValidation.ts)
  invalidText='Input error'; //Validation text
/>

<Textarea
  name="textarea"
  bind:value={someVariable} //to bind value to variable
/>

<Switch
  name="switch2"
  bind:value={someVariable}
/>

<Select
  name = "cars"
  options = {options}
  icon = '';
  value = '';
  placeholder = '';
/>

<Dropdown
  text="Filter by type"
  icon = "fa-sliders-simple"
>
  <div class="filter-box">
    {#each options as option}
      <Checkbox id="{option.value}" name="{option.value}" text="{option.text}"/>
    {/each}
  </div>
</Dropdown>

<RadioInput
  id="radio1"
  name="radio"
  text="radio1"
/>

<InputWithSelect
  name="selectInput"
  selectName="selectInput2"
  options="{optionstext}" //options object { value: '', text: '' }
/>

<ImagePicker
  maxAmount={1} //by default is set to infinity
  imageWidth={imageWidthcss} //For media folder to change image sizes
/>

<DividerPlus
  name="Appearance" //text in divider header
>
  <div class="form">
    <Tooltip
      tooltip='Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.   Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.'
      text='Rounded corners'
    />
    <TextInput name="input" bind:value={newSiteData.borderRadius}/>
  </div>
  
   ...

</DividerPlus>

<Divider
  name="Appearance" //text in divider header
>
  
   ...

</Divider>

<DateInput
  name="dateInput"
/>

<Checkbox
  id="video"
  name="video"
  text="Video" 
  icon="fa-video"
/>

<ColorPickerInput
  bind:color={newSiteData.primaryColor}
  label="Click to pick up a color" //text before choosing color
/>

<ColorPickerMultiInput/>