patternfly / patternfly/patternfly-react

Input Components - Simplify Interface by handling FormGroup internally

Open
#8,248 3 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Breaking change :boom: Pinned
Dominant language
TypeScript
Stars
862
Forks
392
Avg merge
4d 8h
Merged PRs (30d)
9

Description

Labels and inputs in html are hooked together by ID.

<label for="username">Enter your username:</label>
<input id="username" />

In PF4 to get a label on an input requires a FormGroup.

<FormGroup
    id="user-form-group"
    fieldId="user"
    label="User"
    helperText="User help text"
    isRequired
    validated={error ? 'error' : undefined}
    helperTextInvalid={error}
>
    <TextInput
        id="user"
        type="text"
        aria-describedby="user-form-group"
        isRequired
        validated={error ? 'error' : undefined}
        placeholder="Enter user"
        value={user}
        onChange={onChange}
    />
</FormGroup>

It make for a streamlined developer experience if that logic could be hidden from the developer. On a input component, if a label is provided, then the component could handle all the logic internally.

<TextInput
    id="user"
    label="User"
    helper="User help text"
    type="text"
    required
    placeholder="Enter user"
    value={user}
    onChange={onChange}
    error={error}
/>

Contributor guide

Open the contributing guide

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.

Research direction

Start by reviewing the existing input components and FormGroup implementation to understand their current responsibilities and public APIs. Compare how labels, IDs, helper text, required state, validation, and errors are handled, then define the component behavior and tests needed to confirm that labeled inputs work without an explicit FormGroup.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
30/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.