InputTypes

SLO Hacks Attendee Application Input Types

For the attendee frontend application questionnaire, the projects runs using Redux Form, and React Router.

InputType.jsx

The InputType component determines the type of input that should be rendered for a particular question based on the questions' properties.

For example,

        {         
          "id": "name",
          "title": "What is your name?",
          "inputType": "textInput"
        }

The InputType component will render a basic input because the inputType property that was defined was textInput.

Validation for Input Types

In addition, the InputType component is capable of handling custom validation for each question.

Another example,

        {          
          "id": "email",
          "title": "What is your email?",
          "inputType": "textInput",
          "validate": "email"
        }

The InputType component will render a text input and ensure that the user enters a valid email.

Currently there are three options for the validate property:

• none, will indicate that the question isn't required to be filled out.
• email, will ensure that the user enters a valid email, otherwise the field is considered invalid.
• phoneNumber, the phone number validation covers basic phone numbers in the US and other countries.

InputType Options

TextInput.jsx

The TextInput component will render a basic text input where a user can type in their own input.

In order to use this input type you have to pass in the title of the question and indicate the inputType property as textInput.

        {          
          "id": "college",
          "title": "What college are you studying at?",
          "inputType": "textInput"
        }

SelectInput.jsx

The SelectInput component will render a drop-down of options that the user can choose from.

For the SelectInput component to work, you need to pass a question with the title and the inputType as dropDown.

In addition, you need to pass an options property with the question to indicate the options the user can choose from.

        {          
          "id": "diet",
          "title": "Dietary Restrictions",
          "inputType": "dropDown",
          "options": {
            "None": 0, 
            "Kosher": 1, 
            "Gluten Free": 2, 
            "Vegan": 3, 
            "Vegetarian": 4
          }
        }

The option property takes in an object with the keys as the choices and the value for that specific choice.

MultiSelect.jsx

The MultiSelect component will render a drop-down like the SelectInput component, but will allow the use of an other option, where the user can enter their own input for the given question.

For the MultiSelect component to function correctly add the Other option at the end of the options property and make the value equal to # of options available.

        {
          "id": "ethnicity",
          "title": "What's your ethnicity?",
          "inputType": "multiSelect",
          "options": {
            "American Indian or Alaska Native": 0,
            "Asian": 1,
            "Black or African American": 2,
            "Hispanic or Latino": 3,
            "Native Hawaiian or Other Pacific Islander": 4,
            "White": 5,
            "Other": 6
          }
        }

Although validation isn't specified in the question, you can manually add validation to the page that is expected to have a Multi-Select component.

FileInput.jsx

The FileInput component will render a field for allowing a user to upload a file. When the user uploads a file, the file name is stored in the redux store and retrieved as JSON.

Just like the other input types stated above, the FileInput component requires you to send a question with the title property and the inputType as fileUpload.

        {          
          "id": "resume",
          "title": "Upload your resume!",
          "inputType": "fileUpload",
          "validate": "none"
        }