Rendering a visually hidden Checkbox using the VisuallyHidden component to show a custom checkbox presentation in React.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
import{ useState }from"react";import{ Checkbox, CheckboxCheck, useCheckboxState }from"ariakit/checkbox";import{ VisuallyHidden }from"ariakit/visually-hidden";import"./style.css";exportdefaultfunctionExample(){const checkbox = useCheckboxState<boolean>();const[focusVisible, setFocusVisible]=useState(false);return(<labelclassName="label"><VisuallyHidden><Checkboxstate={checkbox}onFocusVisible={()=>setFocusVisible(true)}onBlur={()=>setFocusVisible(false)}/></VisuallyHidden><divclassName="checkbox"data-focus-visible={focusVisible ?"":null}><CheckboxCheckchecked={checkbox.value}/></div>
I have read and agree to the terms and conditions
</label>);}