mixin view-text-field 
    +view('text-field', 'Text field')
        .c-box
            div(style={ display: 'flex', gap: '1rem' })
                +text-field(placeholder='Placeholder')
                +text-field(value='Just landed in L.A.')
                +text-field(value='Readonly' readonly=true)
                +text-field(value='Incorrect input' pattern='a+' required=true)
            br
            div(style={ display: 'flex', gap: '1rem' })
                +text-field(placeholder='Placeholder' disabled=true)
                +text-field(value='Just landed in L.A.' disabled=true)
                +text-field(value='Readonly' readonly=true disabled=true)
                +text-field(value='Incorrect input' pattern='a+' required=true disabled=true)
            br
            div
                +text-field(placeholder='Just landed in L.A.' class="u-p-50")
                    +slot('pre')
                        +action-button(quiet=true class='l-media__block')= 'Volpeon'
                        +divider('vertical')(class='u-mis-50')
                    +slot('post')
                        +action-button(quiet=true icon='smile' class='l-media__block')
                        +action-button(quiet=true icon='send' class='l-media__block')