Skip to content

Instantly share code, notes, and snippets.

@brendancarney
Created March 3, 2023 14:59
Show Gist options
  • Save brendancarney/05f91dc3bdd26373acf2699625ac6db4 to your computer and use it in GitHub Desktop.
Save brendancarney/05f91dc3bdd26373acf2699625ac6db4 to your computer and use it in GitHub Desktop.
funtion WidthField({ label, describing }) {
// Not sure about `describing`, but wanted some way to associate what the whole field is related to
return (
<Fieldset>
<Legend><VisuallyHidden>{describing}</VisuallyHidden> {label}</Legend>
<RadioButtonGroup>
<VisuallyHidden><Label> type (?)</Label></VisuallyHidden>
</RadioButtonGroup>
<Flex>
<ScreenReaderHidden> {/* screen readers won't need the slider b/c they have the input *}
<Slider id="slider-id" className="flex-grow"/>
</ScreenReaderHidden>
<VisuallyHidden><Label>pixel width</Label></VisuallyHidden>
<Input append="px"/>
</Flex>
</Fieldset>
)
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment