Semantic-ui: Readonly plain text form field

[corydeppen]

I've looked through the docs but haven't seen an equivalent to Bootstrap's readonly plain text styling for form fields. This would be beneficial for those times when you'd rather not render a form input but prefer to only show the field label and value.

[dinhani]

I have the same issue. In forms where inputs and plain text are mixed, plain text fields seems out of place.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 30 days if no further activity occurs. Thank you for your contributions.

[prudho]

It's something that can be implemented like this:

In the file src/definitions/collections/form.less add the following lines:

/*--------------------
   Plain-text fields
---------------------*/
.ui.form textarea.plain-text,
.ui.form input:not([type]).plain-text,
.ui.form input[type="date"].plain-text,
.ui.form input[type="datetime-local"].plain-text,
.ui.form input[type="email"].plain-text,
.ui.form input[type="number"].plain-text,
.ui.form input[type="password"].plain-text,
.ui.form input[type="search"].plain-text,
.ui.form input[type="tel"].plain-text,
.ui.form input[type="time"].plain-text,
.ui.form input[type="text"].plain-text,
.ui.form input[type="file"].plain-text,
.ui.form input[type="url"].plain-text {
  border-color: transparent !important;
  background-color: transparent !important;
  padding-left: 0em !important;
  padding-right: 0em !important;
  box-shadow: none !important;
  border-radius: 0px !important;
}

Then rebuild semantic-ui.

Just add the class plain-text to your form input (or textarea) and you'll see this result:

[stale[bot]]

There has been no activity in this thread for 90 days. While we care about every issue and we’d love to see this fixed, the core team’s time is limited so we have to focus our attention on the issues that are most pressing. Therefore, we will likely not be able to get to this one.

However, PRs for this issue will of course be accepted and welcome!

If there is no more activity in the next 90 days, this issue will be closed automatically for housekeeping. To prevent this, simply leave a reply here. Thanks!

[Alanm63]

if it helps.... in the React version of Semantic UI there is a jsx attribute on the called readOnly

in normal css Semantic UI there is a readonly property you can set.

This does not change the formatting but you can control whether the field is read-only or not.
I've used to toggle between fields being editable or not.

[GammaGames]

Why not use transparent input?

Also, why doesn't textarea have a transparent style built in?

[RickyLin]

Yes, React version of Semantic UI can achieve the same effect with combination of transparent and readOnly:

import React, { Component } from 'react'
import { Form, Input } from 'semantic-ui-react'

class MyComponent extends Component {
    render() {
        return (
            <Form>
                <Form.Field>
                    <label>Company:</label>
                    <Input type="text" value="ABC Company" transparent={true} readOnly={true} />
                </Form.Field>
            </Form>
        );
    }
}

[lubber-de]

Also, why doesn't textarea have a transparent style built in?

transparent input will be supported for textarea in Fomantic-UI 2.7.2
https://github.com/fomantic/Fomantic-UI/pull/392