Comments (13)
What about readonly
?
from tailwindcss-custom-forms.
I'll likely be adding some default disabled styles in the next release but you can always just add utilities to make things feel disabled:
<input type="checkbox" class="form-checkbox opacity-50" disabled>
This is what I do currently on my own projects, never really been a painful problem.
from tailwindcss-custom-forms.
I'd like to be able to @apply disabled:text-gray-600 disabled:cursor-not-allowed
please :)
from tailwindcss-custom-forms.
This is how I handled mine in Vue
<button
:disabled="!isFormValid"
:class="{ 'opacity-25 cursor-not-allowed': !isFormValid }"
type="submit"
class="text-white bg-primary font-semibold py-1 px-3 rounded"
>
<span class="uppercase">Do something</span>
</button>
isFormValid() {
// return your condition
},
from tailwindcss-custom-forms.
I've been messing with the disabled state for a checkbox and having a hard time to change the icon from white to a dark gray from my Tailwind theme. Hoping to see if someone else can figure that out.
from tailwindcss-custom-forms.
Colorizing the check will be harder indeed since it's actually a background-image.
Other than that: should we use a disabled state per component (which is more flexible but is harder to keep in sync between components) or do we use a global disabled background-color, ect (which will require to merge the disabled theming with the components here:)?
from tailwindcss-custom-forms.
As workaround we can define disabled state inside theme config
default: {
input: {
borderColor: theme('colors.grey.lighter'),
borderWidth: '1px',
borderRadius: undefined,
'&::placeholder': {
opacity: '1',
},
'&:hover': {
borderColor: theme('colors.grey.default'),
'&:focus': {
borderColor: theme('colors.grey.dark'),
},
},
'&:focus': {
outline: 'none',
boxShadow: undefined,
borderColor: theme('colors.grey.dark'),
},
'&:disabled': {
opacity: 0.4,
},
},
},
from tailwindcss-custom-forms.
+1 ^
Config looks like a way to go.
I would say that opacity 0.4 isnt the best choice (especially for those with weaker-contrast screens). Kind of hard to see, when there is a value already, or checkbox is checked for example. I personally use grey bg color.
from tailwindcss-custom-forms.
Did anyone nail down an appropriate way forward for this? Not having a disabled state for checkboxes is kind of a bummer.
from tailwindcss-custom-forms.
Actually looking at the 2.0 documentation it seems that this is possible now, right?
from tailwindcss-custom-forms.
Yes, :disabled
is now available here.
@adamwathan can this issue be closed?
from tailwindcss-custom-forms.
The other missing key is disabled placeholder color. Not sure it's supported in tailwindcss as
variants: {
extend: {
placeholder: ['disabled']
}
}
triggers TypeError: variantsValue is not iterable
error.
Trying to do disabled:placeholder-gray-400
from tailwindcss-custom-forms.
Yes, this is possible now (using 2.0) : disabled:opacity-25 disabled:cursor-not-allowed
But you must define the appropriate variants
variants: {
extend: {
opacity: ['disabled'],
cursor: ['disabled'],
},
},
from tailwindcss-custom-forms.
Related Issues (20)
- Installation failed HOT 1
- Style input for datalist
- Ability to render `icon` on unchecked radios and checkboxes
- Custom-forms with applyComplexClasses on shows focus state as default state HOT 1
- Custom forms larger than tailwindcss due to lodash
- Allow styling of checkboxes using the text-color classes HOT 1
- important : true is not suppurted HOT 1
- Checkbox a11y HOT 2
- Custom Forms not recompiling when making changes in tailwind config HOT 1
- Safari not picking up custom checkbox HOT 3
- states (focus, hover) not working HOT 1
- is it possible to change the color of the external border of the radio icon
- Issue when upgrading to TW v2 HOT 7
- How can I customize the background size of a radio icon?
- Could not find a declaration file for module '@tailwindcss/custom-forms' HOT 1
- Difference between this and @tailwindcss/forms? HOT 5
- Can't change default borderWidht of select html element.
- Form input fields are not showing in modal.
- form-* dos not apply all styles HOT 3
- 8 HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from tailwindcss-custom-forms.