search

Automattic / vip-design-system

Design system components used throughout WordPress VIP
https://vip-design-system-components.netlify.app/
15 stars 3 forks source link

Add hint option to Checkbox input #377

Closed kat3samsin closed 4 months ago

kat3samsin commented 4 months ago

Description

Add hint on checkbox validation.

image

Checklist

Steps to Test

  1. Pull down PR.
  2. npm run dev.
  3. Open checkbox component
netlify[bot] commented 4 months ago

Deploy Preview for vip-design-system-components ready!

Name Link
Latest commit 5255888e7f98fecc3d66a8b6fb3ac8a23c8c6af5
Latest deploy log https://app.netlify.com/sites/vip-design-system-components/deploys/66281da630784e0008d9f9b0
Deploy Preview https://deploy-preview-377--vip-design-system-components.netlify.app
Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

djalmaaraujo commented 4 months ago

@kat3samsin This "works", might just need CSS, can you check?

<Form.Input
            forLabel="input-with-error"
            label="Error Checkbox"
            errorMessage="Please type numeric characters only"
            as={ () => (
                <Checkbox onCheckedChange={ () => {} } checked aria-labelledby="input-with-error-var" />
            ) }
            hasError
        />
image
kat3samsin commented 4 months ago

This "works", might just need CSS, can you check?

<Form.Input
forLabel="input-with-error"
label="Error Checkbox"
errorMessage="Please type numeric characters only"
as={ () => (
<Checkbox onCheckedChange={ () => {} } checked aria-labelledby="input-with-error-var" />
) }
hasError
/>

Thanks for this suggestion I'll try it this way first.

kat3samsin commented 4 months ago

Closing this PR, I'll just go with adding component in the UI.