https://github.com/soenneker/soenneker.quark.fields
A series of Blazor Quark components for form inputs.
https://github.com/soenneker/soenneker.quark.fields
blazor blazorlibrary csharp css dotnet elements field fields html quark ui wrapper
Last synced: 5 months ago
JSON representation
A series of Blazor Quark components for form inputs.
- Host: GitHub
- URL: https://github.com/soenneker/soenneker.quark.fields
- Owner: soenneker
- License: mit
- Created: 2025-09-12T20:02:29.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2025-09-19T12:34:35.000Z (9 months ago)
- Last Synced: 2025-09-20T05:24:11.540Z (9 months ago)
- Topics: blazor, blazorlibrary, csharp, css, dotnet, elements, field, fields, html, quark, ui, wrapper
- Language: HTML
- Homepage: https://soenneker.com
- Size: 63.5 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: .github/CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: .github/CODE_OF_CONDUCT.md
- Security: .github/SECURITY.md
Awesome Lists containing this project
README
[](https://www.nuget.org/packages/soenneker.quark.fields/)
[](https://github.com/soenneker/soenneker.quark.fields/actions/workflows/publish-package.yml)
[](https://www.nuget.org/packages/soenneker.quark.fields/)
[](https://soenneker.github.io/soenneker.quark.fields/)
#  Soenneker.Quark.Fields
### A series of Blazor Quark components for form field layouts and structure.
## Installation
```
dotnet add package Soenneker.Quark.Fields
```
## Components
### Field
A layout/structural component that groups a label, input, and optional help/validation messages together in a consistent way. Often used for form rows where you want a label on top/side and the input underneath, styled according to the CSS framework.
### FieldLabel
A label component that can be associated with form inputs. Supports required indicators and horizontal layout modes.
### FieldBody
A container component for input elements when using horizontal field layouts.
### FieldHelp
A component for displaying help text below form inputs.
## Usage
### Basic Field Layout
```razor
Text Input
This is help text for the text input field.
```
### Horizontal Field Layout
```razor
Email Address
We'll never share your email with anyone else.
```
### Form Example
```razor
First Name
Newsletter
Subscribe to our newsletter
Get updates about new products and special offers.
```
## Features
- **Layout Support**: Both vertical and horizontal field layouts
- **Required Indicators**: Visual indicators for required fields
- **Help Text**: Consistent styling for help text
- **Bootstrap 5 Compatible**: Uses Bootstrap 5 CSS classes for consistent styling
- **Quark Components**: Built using Quark.Divs, Quark.Labels, and Quark.Spans for consistency
- **Built-in Styling**: Components include default spacing and styling that can be overridden
- **Accessibility**: Proper label associations and semantic HTML structure
## CSS Classes and Default Styling
The components use Bootstrap 5 CSS classes with built-in default styling:
- **Field**: `form-group` (base), `row` (horizontal)
- Default: `margin-bottom: 1.5rem`
- Horizontal: `display: flex; align-items: flex-start; gap: 1rem`
- **FieldLabel**: `form-label` (base), `col-form-label` (horizontal)
- Default: `margin-bottom: 0.5rem; font-weight: 500`
- Horizontal: `padding-top: calc(0.375rem + 1px); padding-bottom: calc(0.375rem + 1px); margin-bottom: 0; font-weight: 500`
- **FieldBody**: No classes (Bootstrap 5 doesn't require them)
- **FieldHelp**: `form-text text-muted`
- Default: `margin-top: 0.25rem; font-size: 0.875em`
All default styling can be overridden by passing custom `Style` or `Class` parameters to the components.