Hacktoberfest 2026: the issues maintainers tagged for October, open and beginner-friendly. Browse Hacktoberfest issues

Ability to create controlled Input components.

Open
#484 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
3/5
Estimated time
1-2 days
Newbie friendliness
45/100
Issue type
Feature
Clarity
Mostly clear
Activity status
Stale
Tech stack
javascript, react
Domain
frontend

Research direction

Start by locating the Input component and reading how its current value and defaultValue behavior is implemented. Check the component's existing Storybook examples and Jest tests, if present, then verify that the requested controlled and uncontrolled behaviors are covered and documented.

Written by the indexing model from the issue text.

Description

Is your feature request related to a problem? Please describe.
The current version of the Input component doesn't allow you to pass in values to the value attribute, only to the defaultValue attribute. This prevents developers from creating Input components that are controlled by passing in state to the value attribute.

Describe the solution you'd like
I would like the option to pass in a prop that gets passed into the value attribute on the input tag. One way I was thinking this could be done is by adding a prop called isControlled that determines whether the value passed into the value prop is passed down to the value or the defaultValue attribute.

If isControlled=true, pass the component's value prop to the value attribute on the input tag.
If isControlled=false, pass the component's value prop to the defaultValue attribute on the input tag. (This is how it currently works).

Describe alternatives you've considered
Another alternative would be to add another prop that is passed directly to value. However, this would allow developers to pass values to both value and defaultValue at the same time, which is considered a bad practice in React, and will generate warnings in the console.

Dominant language
JavaScript
Stars
4
Forks
2
PR merge metrics
No merged PRs in 30d

Getting set up

We have not checked this project's setup files yet. Start from its README, and see our first-contribution guide for the general steps.

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from bcgov/react-shared-components

All issues in bcgov/react-shared-components

Similar issues

More JavaScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.