> For the complete documentation index, see [llms.txt](https://ed.sunbird.org/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ed.sunbird.org/release-6.0.0/use/source-code/ui-user-interface-sunbird-ed-portal/component-style-guide-version-1/forms.md).

# Forms

Forms are a core component of the Sunbird-Ed portal, offering a cohesive and user-friendly experience. We've carefully designed our forms to align with our style guide, ensuring a consistent look and feel across the application.

Within our forms, we've implemented customized checkboxes and radio buttons. These elements not only maintain visual harmony with our design but also enhance user interactions. Users can engage with these form elements effortlessly, providing a seamless and intuitive experience. For more information please refer to this link <https://sunbird-ed.github.io/sunbird-style-guide/dist/#/forms>

**Example of Checkboxes:**

<figure><img src="/files/0MfJ0u3nKBEMYuvhA78c" alt=""><figcaption></figcaption></figure>

```html
<div class="d-flex flex-w-wrap">
  <div class="sb-checkbox sb-checkbox-primary">
    <input type="checkbox" id="check1" name="example">
    <label for="check1">Primary checkbox</label>
  </div>
  <div class="sb-checkbox sb-checkbox-secondary">
    <input type="checkbox" id="check2" name="example">
    <label for="check2">Secondary checkbox</label>
  </div>
  <div class="sb-checkbox sb-checkbox-warning">
    <input type="checkbox" id="check3" name="example">
    <label for="check3">Warning checkbox</label>
  </div>
  <div class="sb-checkbox sb-checkbox-error">
    <input type="checkbox" id="check4" name="example">
    <label for="check4">Error checkbox</label>
  </div>
</div>
```

**Example of Radio buttons:**

<figure><img src="/files/qF7ZC6TWmiEAcdAyt9QB" alt=""><figcaption></figcaption></figure>

```
<div class="d-flex flex-w-wrap">
      <div class="sb-radio-btn-checkbox sb-radio-btn-primary">
            <input type="radio" id="radio11" name="example">
            <label for="radio11">Primary checkbox</label>
      </div>
      <div class="sb-radio-btn-checkbox sb-radio-btn-secondary">
            <input type="radio" id="radio12" name="example">
            <label for="radio12">Secondary checkbox</label>
      </div>
      <div class="sb-radio-btn-checkbox sb-radio-btn-warning">
            <input type="radio" id="radio13" name="example">
            <label for="radio13">Warning checkbox</label>
      </div>
      <div class="sb-radio-btn-checkbox sb-radio-btn-error">
            <input type="radio" id="radio14" name="example">
            <label for="radio14">Error checkbox</label>
      </div>
</div>    
```

**Example of Form Fields:**

<figure><img src="/files/qMkHbg9cTHjkF6Xy1OzT" alt=""><figcaption></figcaption></figure>

```html
<div class="sb-field-group">
  <label>Field Name</label>
  <div class="sb-field">
    <input class="sb-form-control" type="text" placeholder="Enter Mobile Number">
    <i class="search icon sb-input-icon"></i>
  </div>
</div>
```

<figure><img src="/files/JItSs82cSg8wBU72Rl8I" alt=""><figcaption></figcaption></figure>

```html
<div class="sb-field-group">
    <label>Field Label</label>
    <div class="sb-field relative">
        <textarea rows="4" name="moretext" class="sb-form-control" placeholder="Type here..."></textarea>
        <span class="characters-left">1000 Characters left</span>
    </div>
</div>
```


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://ed.sunbird.org/release-6.0.0/use/source-code/ui-user-interface-sunbird-ed-portal/component-style-guide-version-1/forms.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.