[Sistent] Add FormControl component to the sistent components page

[rishiraj38]

Current Behavior

Layer5 and it's projects use Sistent library to enable easy component reusability among our various projects.
One such component is FormControl.

https://playground.meshery.io/user/preferences

Ideally, all sistent components are represented on https://layer5.io/projects/sistent/components, so a centralized usage and example documentation can be maintained. This will aid new developers to more quickly jump into contributing to the various projects.

The FormControl component currently needs this representation.

Desired Behavior

Proper documentation for FormControl component similar to Button component on https://layer5.io/projects/sistent/components.

The documentation should follow the new Sistent MDX documentation structure. This requires creating a new folder at src/collections/sistent/components/formcontrol/ with three distinct files:

• index.mdx : Explanation of the function that the component serves in context of its usage (Overview).
• guidance.mdx : Stylistic guidelines and best practices to be followed while using the component.
• code.mdx: Code examples showing various states (enabled, disabled, error) using <ThemeWrapper> and <CodeBlock>.

Additionally, the component needs to be added to the Sistent side navigation by creating entries for all three tabs in src/components/SistentNavigation/content.js.

---

Contributor Resources and Handbook

The layer5.io website uses Gatsby, React, and GitHub Pages. Site content is found under the master branch.

• 🎨 See Sistent Repository.
• 📚 See contributing instructions.
• 🎨 Wireframes and designs for Layer5 site in Figma (open invite)
• 🙋🏾🙋🏼 Questions: Discussion Forum and Community Slack.

Join the Layer5 Community by submitting your community member form.

[piyush2693]

I want to solve this issue

[21f3000703]

could you assign this to me? @rishiraj38

[rishiraj38]

Thanks!

[piyush2693]

Hi @rishiraj38
I’ve started working on this issue and will raise a PR soon.

[piyush2693]

@rishiraj38 ,
Hi 👋

I’ve been working on improving the FormControl documentation and aligning it with the Button docs structure.

I wanted to confirm one thing to ensure I’m on the right track:

Currently, I’ve added a complete form example (covering inputs, selection controls, validation, and actions) to demonstrate the full form system for new developers. I’ve also structured the sections similar to other components.

Would you prefer the FormControl docs to:

1. Focus more on a real UI form (like a full product-style form), or
2. Emphasize individual FormControl responsibilities (like label, input grouping, helper text, validation handling) with isolated examples?

Also, are there any specific elements or patterns you’d like to see explicitly covered in FormControl (e.g., error handling, accessibility, layout rules, or integration with other components)?

Would really appreciate your guidance so I can refine it further

[rishiraj38]

@piyush2693 I think the second option is more preferable.