Persistence

Persist form values either in session storage or in local storage.

Persistence works for uncontrolled components only.

Please make sure form and name props are specified.


() => {
  return (
    <>
      <L.AutoComplete
        form='persist'
        name='auto'
        data={['Argentina', 'Spain']}
        persistence={L.ValidationTypes.Persistence.localStorage}
        _mb-4
        _w-48
      />

      <L.ButtonGroup
        form='persist'
        name='buttonGroup'
        data={['One', 'Two']}
        persistence={L.ValidationTypes.Persistence.localStorage}
        _mb-4
      />

      <L.Calendar
        form='persist'
        name='calendar'
        onChange={() => {}}
        persistence={L.ValidationTypes.Persistence.localStorage}
        _mb-4
      />

      <L.CheckBox
        form='persist'
        name='check'
        persistence={L.ValidationTypes.Persistence.localStorage}
        _mb-4
        _w-48
      >
        Agree
      </L.CheckBox>

      <L.DatePicker
        form='persist'
        name='datePicker'
        persistence={L.ValidationTypes.Persistence.localStorage}
        _mb-4
        _w-48
      />

      <L.DateRange
        form='persist'
        name='dateRange'
        persistence={L.ValidationTypes.Persistence.localStorage}
        _mb-4
        _w-96
      />
      
      <L.DateTimePicker
        form='persist'
        name='dateTimePicker'
        persistence={L.ValidationTypes.Persistence.localStorage}
        _mb-4
        _w-48
      />
      
      <L.DateTimeRange
        form='persist'
        name='dateTimeRange'
        persistence={L.ValidationTypes.Persistence.localStorage}
        _mb-4
        _w-96
      />

      <L.DropDownSelect
        form='persist'
        name='select'
        data={['One', 'Two']}
        persistence={L.ValidationTypes.Persistence.localStorage}
        _mb-4
        _w-48
      />

      <L.Input
        form='persist'
        name='input'
        persistence={L.ValidationTypes.Persistence.localStorage}
        _mb-4
        _w-48
      />

      <L.MaskedInput
        form='persist'
        name='maskedInput'
        mask='####'
        persistence={L.ValidationTypes.Persistence.localStorage}
        _mb-4
        _w-48
      />

      <L.MultiSelect
        form='persist'
        name='multi'
        data={['Argentina', 'Spain']}
        persistence={L.ValidationTypes.Persistence.localStorage}
        _mb-4
        _w-48
      />

      <L.NumericTextBox
        form='persist'
        name='numeric'
        persistence={L.ValidationTypes.Persistence.localStorage}
        _mb-4
        _w-48
      />

      <L.NumericRange
        form='persist'
        name='numericRange'
        persistence={L.ValidationTypes.Persistence.localStorage}
        _mb-4
        _w-96
      />
     
      <L.RadioGroup
        form='persist'
        name='radio'
        persistence={L.ValidationTypes.Persistence.localStorage}
        _mb-4
      >
        <L.RadioButton value='one'>One</L.RadioButton>
        <L.RadioButton value='two'>Two</L.RadioButton>
      </L.RadioGroup>

      <L.Rating
        form='persist'
        name='rating'
        persistence={L.ValidationTypes.Persistence.localStorage}
        _mb-4
      >
        Rate
      </L.Rating>

      <L.Switcher
        form='persist'
        name='switcher'
        persistence={L.ValidationTypes.Persistence.localStorage}
        _mb-4
      >
        Toggle
      </L.Switcher>
      
      <L.Textarea
        form='persist'
        name='textarea'
        persistence={L.ValidationTypes.Persistence.localStorage}
        _mb-4
        _w-48
      />
    
      <L.TimePicker
        form='persist'
        name='timePicker'
        persistence={L.ValidationTypes.Persistence.localStorage}
        _mb-4
        _w-48
      />

      <L.TimeRange
        form='persist'
        name='timeRange'
        persistence={L.ValidationTypes.Persistence.localStorage}
        _mb-4
        _w-96
      />


      <L.Button
        form='persist'
        _mb-4
        onClick={({ form }) => console.log(form)}
      >
        Log form
      </L.Button>
    </>
  );
}