Password , Date input type with @dhis2/ui

Development - Développement App Development
1

Hi folks,
Please What is the right way to define password and date input type with @dhis2/ui,
I can’t get this work and no related information about it in storybook.

Best

2

Please see the API docs for more info. The Input and InputField component both have a type prop, you can set this to date or password, or any other valid input type as defined in the HTML specs.

3

Hi @hendrik, Thank you for response
Meaning actualy this short code can’t work

Or I need necessarily to use " import { InputField } from '@dhis2/ui-widgets' " than "import { InputFieldFF} from '@dhis2/ui'"
4

Meaning actualy this short code can’t work

Not sure what you mean by that. But I will try to explain the differences between the different types of input component we have:

  • Input is the most basic, basically only a input tag
  • InputField is the one you probably want to use, it has some commonly used properties such as label, helpText and validationText
  • InputFieldFF is a version of the InputField that has been made compatible with react-final-form. You only want to use this one if you are using react-final-form, which I would probably recommend if you have to deal with many and/or complex forms.

Also I’ll provide some code that showcases the InputField in action:

import React, { useState } from 'react'
import { InputField } from '@dhis2/ui'

const Demo = () => {
    const [password, setPasword] = useState('')
    const [date, setDate] = useState('')

    return (
        <>
            <InputField
                label="Password demo"
                type="password"
                value={password}
                onChange={({ value }) => setPasword(value)}
            />
            <InputField
                label="Date demo"
                type="date"
                value={date}
                onChange={({ value }) => setDate(value)}
            />
        </>
    )
}

export { Demo }

Hope this helps.

1 Like
5

Ok @hendrik.
Thanks