Skip to content

Feat add label and input component#84

Merged
lucasadsr merged 3 commits intodevelopfrom
feat-add-label-and-input-component
Dec 30, 2025
Merged

Feat add label and input component#84
lucasadsr merged 3 commits intodevelopfrom
feat-add-label-and-input-component

Conversation

@MarcosvBueno
Copy link
Contributor

🧩 PR Summary — Input & Label UI Components

This pull request introduces two new core UI components — Input and Label — along with rich example previews and full documentation integration. The update expands form-building capabilities, improves accessibility, and ensures the new components are fully discoverable within the documentation system.


✨ New UI Components

Input

  • Added a new Input component (src/components/ui/input.tsx).
  • Supports multiple variants:
    • default
    • floating
    • floatingInside
    • outlined
  • Includes integrated label handling to improve accessibility and UX.
  • Designed for flexibility across common form use cases.

Label

  • Added a new Label component (src/components/ui/label.tsx) built on Radix UI.
  • Provides accessible, semantically correct labeling for form controls.
  • Designed to pair seamlessly with the new Input component and other form elements.

🧪 Example Previews

  • Added comprehensive example previews demonstrating usage and variants:
    • Input examples:
      src/components/docs/contents/input/input-examples.tsx
    • Label examples:
      src/components/docs/contents/label/label-examples.tsx
  • Examples showcase real-world scenarios and visual variants for quick understanding.

Related diffs:

  • Input examples:
  • Label examples:

📚 Documentation Integration

  • Registered inputDoc and labelDoc in the documentation system:
    • src/lib/docs/component-details.tsx
  • Ensures both components:
    • Appear in the documentation
    • Have dedicated reference pages

Related diffs:

  • Documentation registration:

  • Updated the components index (src/lib/docs/components-index.ts) to include:

    • Categories
    • Status
    • Tags
    • Dependencies for Input and Label

📦 Dependency Updates

  • Added @radix-ui/react-label to package.json to support the new Label component.

✅ Summary

This PR significantly enhances form capabilities by introducing flexible, accessible Input and Label components. With polished examples and full documentation integration, these additions strengthen the UI library’s usability, consistency, and developer experience.

- Implemented Input component with support for different variants (default, floating, floatingInside, outlined).
- Created Label component using Radix UI's LabelPrimitive for better accessibility and styling.
- Updated package.json and package-lock.json to include new dependencies for Radix UI components.
- Introduced Input component with multiple variants (default, floating, floatingInside, outlined) and comprehensive documentation.
- Added Label component for accessible form labeling, including various usage examples.
- Updated component details and index to include new Input and Label components.
@MarcosvBueno MarcosvBueno self-assigned this Dec 29, 2025
@vercel
Copy link

vercel bot commented Dec 29, 2025

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Review Updated (UTC)
ui Ready Ready Preview, Comment Dec 30, 2025 2:09am

Copy link
Member

@lucasadsr lucasadsr left a comment

Choose a reason for hiding this comment

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

LGTM

@lucasadsr lucasadsr merged commit c9977e9 into develop Dec 30, 2025
2 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants