question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Remove label for ToggleSwitch, breaks i18n

See original GitHub issue

Describe the bug A clear and concise description of what the bug is.

Creating a <ToggleSwitch> forcibly displays an “On” or “Off” label. The only documented options for statusLabelPosition are start and end. How about offering none and make it the default?

To Reproduce Create a <ToggleSwitch>. “On” vs. “Off” is displayed to match the state of the switch.

Expected behavior No label should be displayed. Only the application owner knows the language of the host page, the vocabulary the app is using to describe the state controlled by the switch, what font size/color should be used to be consistent with the rest of the app, etc.

Screenshots If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

  • OS: macOS
  • Browser Chrome
  • Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/101.0.4951.64 Safari/537.36

Additional context While we’re discussing the API, onClick does not seem like a great API name. It suggests the event handler is not appropriate on touch devices. I don’t care whether the user used a mouse, keyboard, or their finger to toggle the state: I want one event handler where I respond to the state change that results from the input event.

Issue Analytics

  • State:closed
  • Created a year ago
  • Comments:8 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
mperrotticommented, May 17, 2022

@bolinfest - no need to fork. There is a workaround you can do with the sx prop until we figure out our i18n/translation strategy for hard-coded strings.

<ToggleSwitch sx={{'> [aria-hidden]': {display: 'none'}}} />
0reactions
rezrahcommented, May 23, 2022

Closing as a workaround has been accepted.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Remove i18n tags from compiled angular templates #11042
I'm submitting a feature request Currently when I build an Angular application with internationalization, I add i18n attributes to many of ...
Read more >
Top 20 CSS Toggle Switches [With Examples] - LambdaTest
In this section, let's see some of the top CSS toggle switches. 1. The Checkbox Toggle Switch. HTML; CSS. Result; Skip Results Iframe....
Read more >
Checkbox Toggle - Lightning Design System
To remain accessible to all user agents, place <input> with type="checkbox" inside the <label> element. The <input> is then visually hidden, and the...
Read more >
Toggle | Nord Design System
Toggle switch gives control over a feature or option that can be turned on or ... Visually hide the label, but still show...
Read more >
Set Toggle color in SwiftUI - Stack Overflow
I created a new ToggleStyle to change the three colors of the Toggle (on color, off color, and the thumb). struct ColoredToggleStyle: ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found