Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(conform-react): add support of descriptionId #126

Merged
merged 1 commit into from
Mar 29, 2023

Conversation

edmundhung
Copy link
Owner

@edmundhung edmundhung commented Mar 24, 2023

Resolve #120

This adds support of descriptionId which could be used to setup an input hint similar to the existing errorId. But to utilize it, it is also required to provide an extra option description: true to the conform helpers which will setup the aria-describedby accordingly.

<input {...conform.input(email, { type: "email" })} />
// If valid, no aria attributes will be set
// If invalid, aria-invalid="true" aria-describedby="errorId"

<input {...conform.input(email, { type: "email", description: true })} />
// If valid, aria-describedby="descriptionId"
// If invalid, aria-invalid="true" aria-describedby="errorId descriptionId"

@codesandbox
Copy link

codesandbox bot commented Mar 24, 2023

CodeSandbox logoCodeSandbox logo  Open in CodeSandbox Web Editor | VS Code | VS Code Insiders

@cloudflare-workers-and-pages
Copy link

cloudflare-workers-and-pages bot commented Mar 24, 2023

Deploying with  Cloudflare Pages  Cloudflare Pages

Latest commit: ae42521
Status: ✅  Deploy successful!
Preview URL: https://7c9624fc.conform.pages.dev
Branch Preview URL: https://input-hint-support.conform.pages.dev

View logs

@edmundhung edmundhung merged commit e55d392 into next Mar 29, 2023
@edmundhung edmundhung deleted the input-hint-support branch March 29, 2023 18:05
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant