Skip to content

feat(switch): update switch topics - #546

Open
Hristo313 wants to merge 17 commits into
vnextfrom
hhristov/update-switch-topics
Open

feat(switch): update switch topics#546
Hristo313 wants to merge 17 commits into
vnextfrom
hhristov/update-switch-topics

Conversation

@Hristo313

@Hristo313 Hristo313 commented Sep 2, 2026

Copy link
Copy Markdown
Contributor

Closes #537

Update the switch xplat topics

Also updated the samples:
Angular -> IgniteUI/igniteui-angular-samples#4025
React -> IgniteUI/igniteui-react-examples#1102
WC -> IgniteUI/igniteui-wc-examples#1254
Blazor -> IgniteUI/igniteui-blazor-examples#1302

Checklist:

  • check topic's TOC/menu and paragraph headings
  • Include TOC topic labels in the topic content when it has a valuable update, is new, or is considered preview / beta
  • link to other topics using ./page.mdx or ../relative/path.mdx (.mdx extension required)
  • at the References section at the end of the topic add links to topics, samples, etc
  • reference API documentation instead of adding a section with API

  • use valid component names - [Data] Grid, IgxSelectComponent, <igx-combo>
  • use spell checker tool (VS Code, Grammarly, Microsoft Editor)
  • add inline code blocks for the names of classes / tags / properties
  • add language descriptor for the code blocks
  • check if links function by running the check-api/mdx npm commands
  • check if sample is working and fully visible in the topic
  • check if sample is working and fully visible in the StackBlitz
  • check if code blocks match the code in StackBlitz demo
  • add or update meaningful llms.description metadata and run npm run check:llms-metadata


  • do not resolve requested changes (leave that to the reviewer)

@ChronosSF ChronosSF added 💥 status: in-test PRs currently being tested and removed ❌ status: awaiting-test PRs awaiting manual verification labels Sep 4, 2026
Comment thread docs/xplat/src/content/en/components/inputs/switch.mdx Outdated
<PlatformBlock for="React,WebComponents,Blazor">

<DocsAside type="warning" title="Warning">
The <ApiLink pkg="core" type="Switch" /> component doesn't work with the standard `<form>` element. Use `Form` instead.

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't know what that Form is... This needs a link or an elaboration. My guess is that it's actually a Blazor only note.

@ChronosSF ChronosSF Sep 8, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@Hristo313 , I don't see the note about using Form instead of <form> in the doc anymore, I hope you checked and it's indeed no longer relevant.

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The warning is now scoped to Blazor only. In Blazor we should use EditForm instead of the standard HTML

element.

Comment thread docs/xplat/src/content/en/components/inputs/switch.mdx Outdated
@Hristo313
Hristo313 requested a review from ChronosSF September 8, 2026 09:26

To use the {Platform} Switch, follow the [{ProductName} Getting Started](../general-getting-started.mdx) topic for the basic project setup, then register the component for your target platform.

<PlatformBlock for="Angular">

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think both the Angular and the non-angular platform block under this one show the exact same content and can be combined .

You can specify if the label should be positioned before or after the switch toggle by setting the <ApiLink pkg="core" type="Switch" member="labelPosition" label="LabelPosition" /> attribute of the switch. Allowed values are `before` and `after`(default):
<PlatformBlock for="Angular">

You can use the <ApiLink type="IgxSwitchComponent" member="required" label="required" /> property to mark the switch as required.

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is similar to the previous comment. It seems that you are platformblock-ing the same text for Angular vs the Rest. I am not sure if this is hallucination on the agent side but it makes the document needlessly complicated.

If you are doing it because of issues with the ApiLink then those need to be fixed instead. (also you can just platformblock inline just the apilink as an interim solution.

The switch can also be labelled by elements external to the switch. In this case, the user is given full control to position and style the label in accordance with their needs.
<PlatformBlock for="Angular">

You can use the <ApiLink type="IgxSwitchComponent" member="invalid" label="invalid" /> property to mark the switch as invalid.

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same text between Angular and the rest - same comment as above

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Update switch topics

3 participants