<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> I have searched the <a href="https://github.com/callemall/material-ui/issues">issues</a> of this repository and believe that this is not a duplicate.</li>
</ul>
<p dir="auto"><a href="https://material-ui.com/api/card-header/" rel="nofollow">https://material-ui.com/api/card-header/</a></p>
<p dir="auto">CardHeader allows to put in the title, subheader, and avatar but no way to add action button.</p>
<p dir="auto">Yes, i can use workarounds, create some css etc but i believe it should be solved elegantly with action property.</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/2733862/32300957-7f0b1530-bf64-11e7-94a9-e207e57336b8.png"><img src="https://user-images.githubusercontent.com/2733862/32300957-7f0b1530-bf64-11e7-94a9-e207e57336b8.png" alt="image" style="max-width: 100%;"></a></p>
<p dir="auto">Form elements like a <code class="notranslate">&lt;Checkbox/&gt;</code> don't preserve their state, if they live in a expandable/collapsible <code class="notranslate">&lt;CardText expandable={'true'}&gt;</code>. This is due the content of any expandable is completely removed from the DOM and recreated later again.</p>


<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> I have searched the <a href="https://github.com/mui-org/material-ui/issues">issues</a> of this repository and believe that this is not a duplicate.</li>
</ul>
<h2 dir="auto">Expected Behavior</h2>
<p dir="auto">The state of form elements should be preserved in expandable <code class="notranslate">&lt;Card/&gt;</code>s.</p>
<h2 dir="auto">Current Behavior</h2>
<p dir="auto">The state of form elements is not preserved in expandable <code class="notranslate">&lt;Card/&gt;</code>s.</p>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>
<p dir="auto">Given the following:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;Card initiallyExpanded={true} &gt;
    &lt;CardHeader
       showExpandableButton={true}
       actAsExpander={true}
     /&gt;
    &lt;CardText expandable={true}&gt;
        &lt;Checkbox /&gt;
    &lt;/CardText&gt;
&lt;/Card&gt;"><pre class="notranslate"><code class="notranslate">&lt;Card initiallyExpanded={true} &gt;
    &lt;CardHeader
       showExpandableButton={true}
       actAsExpander={true}
     /&gt;
    &lt;CardText expandable={true}&gt;
        &lt;Checkbox /&gt;
    &lt;/CardText&gt;
&lt;/Card&gt;
</code></pre></div>
<ol dir="auto">
<li>Check the checkbox</li>
<li>Collapse the card</li>
<li>Expand the card</li>
<li>Checkbox is unchecked</li>
</ol>
<h2 dir="auto">Context</h2>
<p dir="auto">I try to design a huge form, which is separated into sections. Each <code class="notranslate">&lt;Card/&gt;</code> is a section. The sections should be collapsible.</p>
<h2 dir="auto">Your Environment</h2>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&quot;dependencies&quot;: {
    &quot;@types/material-ui&quot;: &quot;^0.18.4&quot;,
    &quot;@types/react&quot;: &quot;^16.0.25&quot;,
    &quot;@types/react-dom&quot;: &quot;^16.0.3&quot;,
    &quot;@types/react-redux&quot;: &quot;^5.0.13&quot;,
    &quot;@types/webpack&quot;: &quot;^3.8.1&quot;,
    &quot;awesome-typescript-loader&quot;: &quot;^3.4.0&quot;,
    &quot;babel-core&quot;: &quot;^6.26.0&quot;,
    &quot;babel-loader&quot;: &quot;^7.1.2&quot;,
    &quot;babel-preset-env&quot;: &quot;^1.6.1&quot;,
    &quot;material-ui&quot;: &quot;^0.19.4&quot;,
    &quot;node-sass&quot;: &quot;^4.7.2&quot;,
    &quot;react&quot;: &quot;^16.1.1&quot;,
    &quot;react-dom&quot;: &quot;^16.1.1&quot;,
    &quot;react-redux&quot;: &quot;^5.0.6&quot;,
    &quot;redux&quot;: &quot;^3.7.2&quot;,
    &quot;redux-devtools-extension&quot;: &quot;^2.13.2&quot;,
    &quot;sass-loader&quot;: &quot;^6.0.6&quot;,
    &quot;style-loader&quot;: &quot;^0.19.0&quot;,
    &quot;styled-components&quot;: &quot;^2.2.3&quot;,
    &quot;ts-node&quot;: &quot;^3.3.0&quot;,
    &quot;typescript&quot;: &quot;^2.6.1&quot;,
    &quot;typings-for-css-modules-loader&quot;: &quot;^1.7.0&quot;,
    &quot;webpack&quot;: &quot;^3.8.1&quot;
  }"><pre class="notranslate"><code class="notranslate">"dependencies": {
    "@types/material-ui": "^0.18.4",
    "@types/react": "^16.0.25",
    "@types/react-dom": "^16.0.3",
    "@types/react-redux": "^5.0.13",
    "@types/webpack": "^3.8.1",
    "awesome-typescript-loader": "^3.4.0",
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-env": "^1.6.1",
    "material-ui": "^0.19.4",
    "node-sass": "^4.7.2",
    "react": "^16.1.1",
    "react-dom": "^16.1.1",
    "react-redux": "^5.0.6",
    "redux": "^3.7.2",
    "redux-devtools-extension": "^2.13.2",
    "sass-loader": "^6.0.6",
    "style-loader": "^0.19.0",
    "styled-components": "^2.2.3",
    "ts-node": "^3.3.0",
    "typescript": "^2.6.1",
    "typings-for-css-modules-loader": "^1.7.0",
    "webpack": "^3.8.1"
  }
</code></pre></div>