User experience principles

Constraints

Constraints refer to design choices that limit the range of user interactions. By guiding users toward the intended actions and preventing accidental or erroneous actions, constraints contribute to a smoother user experience. Examples in web development might include using input masks to ensure consistent data formatting, or disabling certain buttons temporarily to prevent double submissions.

You can read more about input fields here, and on button states here.

Loading example...

Open  'src/ConstraintsExample.js'
import { Button, Input } from '@dhis2/ui'

const ConstraintsExample = () => {

    const [disabled, setDisabled] = useState(false);
    
    return (
        <>
            <br/>
            <Input type="number" placeholder="This input field only allows for numbers" />
            <br/>
            <Button disabled={disabled} onClick={()=>setDisabled(true)} >This button cannot be clicked twice</Button>
        </>
           
    );
}
}

export { ConstraintsExample }