<div class="mw__example" data-tags="forms">

        <div class="card" data-view>
            <div class="mw-flex-row">
                <div class="mw-flex-col-xs-2 ">
                    <div class="mw-ui-field-holder">
                        <label class="mw-ui-label">Title</label>
                        <select class="form-select  mw-full-width">
                            <option selected="selected" value="-1">Choose</option>
                            <option value="1">Mr</option>
                            <option value="2">Mrs</option>
                            <option value="3">Miss</option>
                            <option value="4">Ms</option>
                        </select>
                    </div>
                </div>
                <div class="mw-flex-col-xs-5">
                    <div class="mw-ui-field-holder">
                        <label class="mw-ui-label">Name</label>
                        <input type="text" class="form-select  mw-full-width" placeholder="e.g.: Gigi Hadid">
                    </div>
                </div>
                <div class="mw-flex-col-xs-5">
                    <div class="mw-ui-field-holder">
                        <label class="mw-ui-label">Email</label>
                        <input type="email" class="form-select  mw-full-width" placeholder="e.g.: hadid@example.com">
                    </div>
                </div>
                <div class="mw-flex-col-xs-6">
                    <div class="mw-ui-field-holder">
                        <label class="mw-ui-label">Phone</label>
                        <input type="text" class="form-select  mw-full-width" placeholder="e.g.: 008978973">
                    </div>
                </div>
                <div class="mw-flex-col-xs-6">
                    <div class="mw-ui-field-holder">
                        <label class="mw-ui-label">Address</label>
                        <input type="text" class="form-select  mw-full-width">
                    </div>
                </div>
            </div>
            <div class="mw-ui-field-holder">
                <label class="mw-ui-label">Gender</label>
                <ul class="mw-ui-inline-list">

                    <li>
                        <label class="mw-ui-check">
                            <input type="radio" value="pending" name="order_status" checked="">
                            <span></span><span>Male</span>
                        </label>
                    </li>
                    <li>
                        <label class="mw-ui-check">
                            <input type="radio" value="completed" name="order_status">
                            <span></span><span>Female</span>
                        </label>
                    </li>
                </ul>
            </div>
            <div class="mw-ui-field-holder">
                <label class="mw-ui-label">Interests</label>
                <div class="card">
                    <ul class="mw-ui-inline-list">
                        <li>
                            <label class="mw-ui-check">
                                <input type="checkbox" value="1" checked="">
                                <span></span><span>Design</span>
                            </label>
                        </li>
                        <li>
                            <label class="mw-ui-check">
                                <input type="checkbox" value="completed" >
                                <span></span><span>Development</span>
                            </label>
                        </li>
                        <li>
                            <label class="mw-ui-check">
                                <input type="checkbox" value="3" >
                                <span></span><span>UI/UX</span>
                            </label>
                        </li>
                        <li>
                            <label class="mw-ui-check">
                                <input type="checkbox" value="4" >
                                <span></span><span>QA</span>
                            </label>
                        </li>
                        <li>
                            <label class="mw-ui-check">
                                <input type="checkbox" value="5" >
                                <span></span><span>Management</span>
                            </label>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="mw-ui-field-holder">
                <label class="mw-ui-label">Message</label>
                <textarea class="form-select  mw-full-width"></textarea>
            </div>
            <div class="text-end text-right">
                <label class="mw-ui-check">
                    <input type="checkbox" value="1" checked="">
                    <span></span><span>Subscribe</span>
                </label>
                &nbsp;
                <button type="submit" class="  btn btn-primary">Submit</button>
            </div>
        </div>
    </div>
