JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://storage.googleapis.com/code.getmdl.io/1.0.0/material.min.js"></script>
<link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.0/material.indigo-pink.min.css">
<script src="https://fonts.googleapis.com/icon?family=Material+Icons"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<form action="#">
<div id="cadastro-numero-ficha" class="mdl-textfield mdl-js-textfield">
<input class="mdl-textfield__input" type="text" pattern="-?[0-9]*(\.[0-9]+)?" id="numero-ficha">
<label class="mdl-textfield__label" for="numero-ficha">Nº Ficha</label>
<span class="mdl-textfield__error">Apenas numeros!</span>
</div>
<div id="cadastro-nome-ficha" class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" id="nome-ficha" required>
<label class="mdl-textfield__label" for="nome-ficha">Nome Completo</label>
</div>
<h4>This is how it should look like:</h4>
<div id="cadastro-numero-ficha" class="mdl-textfield mdl-js-textfield">
<input class="mdl-textfield__input" type="text" pattern="-?[0-9]*(\.[0-9]+)?" id="numero-ficha" value="32">
<label class="mdl-textfield__label" for="numero-ficha">Nº Ficha</label>
<span class="mdl-textfield__error">Apenas numeros!</span>
</div>
<div id="cadastro-nome-ficha" class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" id="nome-ficha" value="Alexandre Krabbe" required>
<label class="mdl-textfield__label" for="nome-ficha">Nome Completo</label>
</div>
</form>
CSS
form {
width: 70%;
margin: 0 auto;
}
#cadastro-numero-ficha, #cadastro-nome-ficha{
width: 100%;
}
JavaScript
$("#numero-ficha").val('value.number');
$("#nome-ficha").val('value.username');